要求:在打包时将全局中的部分内容替换,混淆视听
webpack打包写法:
1.下载插件:string-replace-webpack-plugin
npm install --save-dev string-replace-loader
2.在webpack.config.ts中引入并配置
const StringReplacePlugin = require('string-replace-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /(agent|index)\.ts$/, //这里写匹配文件,我项目中需要将agent.ts和index.ts文件夹的数据替换
use: [
{
loader: 'string-replace-loader',
options: {
search: 'oldValue',
replace: 'newValue',
},
},
],
},
],
},
}
/**
其中option还有其他写法
1.正则替换
options: {
search:new RegExp(`\\b${keyword}\\b`, 'g'),
replace: 'newValue',
},
*/
当替换内容不止一条时,使用multiple进行多条件替换
const key: string[] = [
'user_Agent',
'userAgentClientHints',
'fonts_',
'domBlockers',
]
//循环创建替换条件
function convertArray(arr: string[]): { search: RegExp; replace: string; flags: string }[] {
return arr.map((item, index) => ({
search: new RegExp(`\\b${item}\\b`, 'g'),
replace: JSON.stringify(index + 1),
flags: 'g',
}))
}
const replaceArr = convertArray(key)
module.exports = {
module: {
rules: [
{
test: /(agent|index|confidence)\.ts$/,
use: [
{
loader: 'string-replace-loader',
options: {
multiple: replaceArr,
},
},
],
},
],
},
}
使用rollup打包替换
1.安装依赖包 rollup-plugin-replace
npm i @rollup/plugin-replace
2.在rollup.config.ts引入并配置
import replace from 'rollup-plugin-replace'
export default {
input: 'src/main.ts', // 你的入口文件
output: {
file: 'dist/bundle.js',
format: 'umd',
},
plugins: [
replace({
include: ['src/**/*.ts'], // 匹配所有的 TypeScript 文件
values: {
demo: 'nihao', // 将 'demo' 替换为 'nihao'
},
}),
// 其他插件...
],
};
多条件引入
import replace from 'rollup-plugin-replace'
const key: string[] = [
'user_Agent',
'userAgentClientHints',
]
const transformedKey: { [key: string]: string } = {}
for (let i = 0; i < key.length; i++) {
transformedKey[key[i]] = String(i + 1)
}
export default {
input: 'src/main.ts', // 你的入口文件
output: {
file: 'dist/bundle.js',
format: 'umd',
},
plugins: [
replace({
replace({
include: ['src/**/index.ts', 'src/agent.ts'],
values: transformedKey,
}),
}),
// 其他插件...
],
};
打包效果:
修改前:
修改后(字段替换为列表中的索引):