webpack插件给所有的:src文件目录增加前缀

1.webpack4的版本写法

class AddPrefixPlugin {apply(compiler) {compiler.hooks.compilation.tap('AddPrefixPlugin', (compilation) => {HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('AddPrefixPlugin',(data, cb) => {// 使用正则表达式替换所有包含 /static/file/ 的路径data.html = data.html.replace(/\/static\/file\//g, '/zhgdxmf/static/file/');cb(null, data);});});compiler.hooks.emit.tapAsync('AddPrefixPlugin', (compilation, callback) => {// 遍历所有输出的资源文件,替换其中的 /static/file/ 路径Object.keys(compilation.assets).forEach((assetName) => {if (assetName.endsWith('.js') || assetName.endsWith('.html')) {let content = compilation.assets[assetName].source();content = content.replace(/\/static\/file\//g, '/zhgdxmf/static/file/');compilation.assets[assetName] = {source: () => content,size: () => content.length};}});callback();});}
}module.exports = AddPrefixPlugin;

webpack 2 的版本

function AddPrefixPlugin(options) {this.options = options || {};
}AddPrefixPlugin.prototype.apply = function(compiler) {compiler.plugin('compilation', (compilation) => {compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {// 使用正则表达式替换所有包含 /static/file/ 的路径htmlPluginData.html = htmlPluginData.html.replace(/\/static\/file\//g, '/zhgdxmf/static/file/');callback(null, htmlPluginData);});compilation.plugin('optimize-assets', (assets, callback) => {// 遍历所有输出文件,替换其中的 /static/file/ 路径Object.keys(assets).forEach((assetName) => {if (assetName.endsWith('.js') || assetName.endsWith('.html')) {let content = assets[assetName].source();content = content.replace(/\/static\/file\//g, '/zhgdxmf/static/file/');assets[assetName] = {source: () => content,size: () => content.length};}});callback();});});
};module.exports = AddPrefixPlugin;

使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
全程借助chatgpt完成,感慨能力之强大啊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50133.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】用队列实现栈

用两个队列(先进先出)实现一个栈(后进先出) 题目链接:https://leetcode.cn/problems/implement-stack-using-queues/description/ 1.C语言首先要造一个队列出来 2.两个队列实现栈,始终保持一个队列为空&…

无人机之环保监控篇

随着科技的不断进步,无人机作为一种创新的技术手段,在环保监控领域发挥着越来越重要的作用。 一、覆盖范围广 无人机能够轻松覆盖广阔的地理区域,无论是偏远的山区、广袤的森林还是大型的工业园区。相比传统的地面检测方式,其不…

关于promise的一些例题(运行步骤详细说明)

关于promise的一些例题(详细说明) 基本例题 // 直接运行 输出 1 2 const promise new Promise((resolve, reject) > {console.log(1);resolve();console.log(2); });// then后面放入微队列 promise.then(() > {console.log(3); });// 输出4 之后没有代码了所以运行为队…

vue中无法调试

vue.config.js中增加 devtool configureWebpack: {name: name,resolve: {alias: {: resolve(src)}},devtool: "cheap-module-source-map" // add},然后重启即可。 顺便招聘:1.需要会日语。2.Java,JS,Vue,DB任一会者皆…

Greenplum数据库中常用的赋予和回收权限

一 赋予表级权限: 使用GRANT语句可以向用户或角色赋予对指定表的权限。以下是一些常见的表级权限及其示例语句: 1 SELECT权限: 允许用户查询表中的数据。 GRANT SELECT ON table_name TO user_name; 2 INSERT权限: 允许用户向表中…

SpringBoot结合easypoi.excel,实现数据导出Excel

大多数业务项目中必然会遇到的一个需求&#xff0c;导出数据文件---Excel。 这里简单贴一下自己开发使用的方式方法&#xff0c;抛砖引玉。 也可小白直接大胆食用。 功能Maven依赖&#xff1a; <dependency><groupId>cn.afterturn</groupId><artifact…

mysql8.x 新增一个端口映射到当前服务(Windows)

1. 查看当前端口是否被占用。 netstat ano | findstr 33061 2.端口映射. netsh interface portproxy add v4tov4 listenport33061 listenaddress0.0.0.0 connectport3306 connectaddress192.168.1.xx 3. 创建一个用户&#xff08; myuser% %指的是所有IP都能访问&#xf…

17 敏捷开发—Scrum(2)

从上一篇 「16 敏捷开发实践&#xff08;1&#xff09;」中了解了Scrum是一个用于开发和维护复杂产品的框架&#xff0c;是一个增量的、迭代的开发过程。一般由多个Sprint&#xff08;迭代冲刺&#xff09;组成&#xff0c;每个Sprint长度一般为2-4周。下面全面介绍Scrumde 角色…

使用umi作为模板如何实现权限管理

三种权限管理的方法&#xff1a; 在做后台管理系统时&#xff0c;难免会使用到权限管理&#xff0c;权限管理方式有三种&#xff0c;分别是&#xff1a;路由、守卫、后端配合。 路由&#xff1a;通过动态路由&#xff0c;根据登录人员不同注册不同的路由&#xff0c;直接让没…

PostgreSQL 数据库 安装

1、官网下载 起源与发展&#xff1a;PostgreSQL最初起源于加州大学伯克利分校的Postgres项目&#xff0c;该项目始于1986年&#xff0c;并一直演进到1994年。在1995年&#xff0c;Postgres项目增加了SQL翻译程序&#xff0c;并更名为Postgres95。随后&#xff0c;在1996年&…

Linux:core文件无法生成排查步骤

1、进程的RLIMIT_CORE或RLIMIT_SIZE被设置为0。使用getrlimit和ulimit检查修改。 使用ulimit -a 命令检查是否开启core文件生成限制 如果发现-c后面的结果是0&#xff0c;就临时添加环境变量ulimit -c unlimited&#xff0c;之后在启动程序观察是否有core生成&#xff0c;如果…

Linux网络:传输层协议TCP(一)

目录 一、TCP协议的定义 二、确认应答机制ACK 三、序号、确认序号 四、超时重传机制 一、TCP协议的定义 TCP 全称为 "传输控制协议(Transmission Control Protocol"). 人如其名, 要对数据的传 输进行一个详细的控制; TCP 协议段格式 • 源/目的端口号: 表示数据…

GO发票真伪批量查验方法、数电票查验接口

“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”&#xff0c;识别率高、识别速度快。 发票&#xff0c;是发生的成本、费用或收入的原始凭证。于公司来说&#xff0c;发票主要是公司做账的依据&…

解决Windows 11更新错误0x800f081f的详细指南

在尝试更新Windows 11时&#xff0c;用户可能会遇到各种错误代码&#xff0c;其中之一是0x800f081f。这个错误通常与Windows更新组件或系统文件的损坏有关。本文将提供解决这一特定错误的详细步骤&#xff0c;并解释可能的原因。 错误代码0x800f081f概述 错误代码0x800f081f指…

【Devops系统】如何构建Devops系统

什么是Devops DevOps是一种软件开发和文化实践&#xff0c;它强调软件开发&#xff08;Dev&#xff09;和IT运营&#xff08;Ops&#xff09;之间的紧密合作与沟通。DevOps的目标是通过自动化软件的集成、测试、部署和监控来简化流程&#xff0c;从而加快软件交付的速度&#x…

pythonGame-实现简单的贪食蛇游戏

通过python简单复现贪食蛇游戏。 使用到的库函数&#xff1a; import pygame import time import random 游戏源码&#xff1a; import pygame import time import randompygame.init()white (255, 255, 255) yellow (255, 255, 102) black (0, 0, 0) red (213, 50, 80…

代码随想录算法训练营第四十四天|99.岛屿数量 100.岛屿的最大面积

99.岛屿数量 深搜 class Solution:def numIslands(self, grid: List[List[str]]) -> int:def dfs(i, j):if not 0 < i < m or not 0 < j < n or grid[i][j] "0":returngrid[i][j] "0"for x,y in (i1,j),(i-1,j),(i,j1),(i,j-1):dfs(x,y)…

新版海螺影视主题模板M3.1全解密版本多功能苹果CMSv10后台自适应主题

苹果CMS2022新版海螺影视主题M3.1版本&#xff0c;这个主题我挺喜欢的&#xff0c;之前也有朋友给我提供过原版主题&#xff0c;一直想要破解但是后来找了几个SG11解密的大哥都表示解密需要大几百大洋&#xff0c;所以一直被搁置了。这个版本是完全解密的&#xff0c;无需SG11加…

Oracle对数据库行和数据库的监控

前言&#xff1a; Oracle对表的监控分为数据行修改DML的监控、对表的DDL监控 1、对表的DML监控&#xff08;数据的增删改&#xff09; -- 创建测试表 create table tab_test01( id varchar2(100) default sys_guid(), name varchar2(100), insert_date date default sysdate…

学习日记:数据类型2

目录 1.转义字符 2.隐式类型转换 2.1 强制类型转换 2.2 不同类型间赋值 3.运算符 表达式 3.1 算术运算符 3.2 算术运算优先级 3.3 赋值运算 3.3.1 不同类型间混合赋值 3.4 逗号运算 4.生成随机数 5. 每日一练 1.转义字符 \n 表示换行 \t …