webpack打包混淆js代码

项目初始化，新建目录，调用 npm init 来初始化 package.json,一路回车,最后得到package.json文件。

{
  "name": "wzatool",
  "version": "4.2.0",
  "main": "wzatool.js",
  "scripts": {
    "test": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "https://www.rrbay.com",
  "license": "GPL",
  "devDependencies": {
    "@babel/plugin-transform-modules-umd": "^7.22.5",
    "cross-env": "^7.0.3",
    "js-base64": "^3.7.5",
    "javascript-obfuscator": "^4.1.0",
    "webpack-obfuscator": "^2.6.0"
  },
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-encoding-plugin": "^0.3.1"
  },
  "description": ""
}

查看node版本,这部很重要，我本地node版本是10，所以webpack安装采用了4.x版本，否则版本不兼容各种问题。

PS E:\obfuscator> node -v
v10.15.3

webpack4的安装方式

npm install --save-dev webpack@4.41.5 
npm install --save-dev webpack-cli@3.3.10
npm install --save-dev javascript-obfuscator webpack-obfuscator@2.6

在项目根目录中创建webpack.config.js,指定入口文件和输出文件的路径

const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  //需要被打包的js文件路径及文件名
  entry: './src/wzatool.js',
  output: {
      //打包输出的目标文件的绝对路径(其中__dirname为当前目录的绝对路径)
      path: __dirname + '/dist',  
      //打包输出的js文件名及相对于dist目录所在路径
      filename: 'wzatool.js'  
  },
  plugins: [
    new WebpackObfuscator({
        compact: true,
        rotateUnicodeArray: true,
        identifierNamesGenerator: 'mangled', // 'hexadecimal',
        renameGlobals: true,
        rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
        selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
        stringArray: true,//删除字符串文字并将它们放在一个特殊的数组中
        stringArrayEncoding: ['base64'], //'rc4',
        // TODO： 加上stringArrayThreshold，steam_limit生成的代码没生效
        // stringArrayThreshold: 1,
        transformObjectKeys: true,
        unicodeEscapeSequence: false //允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
      },
      // 数组内是需要排除的文件
      ['abc.js']
    )
  ]

};

查看混淆加密效果

npm run build

webpack打包混淆js代码

热门