首码网站免费推广,企业平台网站建设方案,wordpress 优化方案,网站维护费大概多少string-replace-webpack-plugin 是一个用于在 webpack 打包后的文件中替换字符串的插件。它可以用于将特定字符串替换为其他字符串#xff0c;例如将敏感信息从源代码中移除或对特定文本进行本地化处理。比如文件的html、css、js中的路径地址想批量更改一下 http://localhost:…string-replace-webpack-plugin 是一个用于在 webpack 打包后的文件中替换字符串的插件。它可以用于将特定字符串替换为其他字符串例如将敏感信息从源代码中移除或对特定文本进行本地化处理。比如文件的html、css、js中的路径地址想批量更改一下 http://localhost:7777/image/111.jpg
改为
http://localhost:7777/web/static/image/111.jpg
文件太多挨个改太多通过string-replace-webpack-plugin在打包的时候批量替换。
一、安装插件
npm install --save-dev string-replace-loader
二、引入插件
在打包的js中引入插件如果是开发和正式两个js注意查看自己的是哪个js。
通过require引入string-replace-webpack-plugin插件然后在plugins中进行初始化。
const StringReplacePlugin require(string-replace-webpack-plugin); module.exports { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: StringReplacePlugin.replace({ replacements: [ { pattern: foo, replacement: bar } ] }) } } ] }plugins: [new VueLoaderPlugin(),...new StringReplacePlugin(),....].concat(htmlPlugin()),
};
三、配置替换规则 最好将string-replace-webpack-plugin插件的解析放在所有加载的最后面替换规则可以写正则表达式注意加上flags为gim要不然只替换一个。
flags 参数用于指定正则表达式的标志。它可以接受一个字符串或一个标志的数组。
标志用于指定正则表达式的匹配行为。一些常见的标志包括
g全局匹配global替换所有匹配的字符串而不仅仅是第一个。i不区分大小写ignore case进行不区分大小写的匹配。m多行模式multiline将正则表达式应用到多行文本中 下面是替换css文件中的图片地址将/image/改为/web/static/image
module.exports { module: {rules: [{//其他的}, {test: /\.css$/,use: [MiniCssExtractPlugin.loader, css-loader,{//替换字符 必须放在最后loader: string-replace-loader,options: {strict: true,multiple: [{search: \/image\/,replace: \/web\/static\/image\/,flags: gim // 指定全局、不区分大小写和多行模式标志 }],}}]},
使用正则也可以用这里提一下大模型真的很赞下面的示例是大模型生成
const StringReplacePlugin require(string-replace-webpack-plugin); module.exports { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: StringReplacePlugin.replace({ replacements: [ { pattern: /foo\sbar/g, // 使用正则表达式匹配 foo 后跟一个或多个空格和 bar 的字符串并全局替换g 标志 replacement: foobar // 将匹配到的字符串替换为 foobar } ] }) } } ] }
};
