使用webpack/rollup打包时将文件中部分内容动态替换

要求：在打包时将全局中的部分内容替换，混淆视听

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,
             }),
    }),
    // 其他插件...
  ],
};

打包效果：

修改前：

修改后（字段替换为列表中的索引）：