如何使用Webpack混淆JS文件？能否先转移文件再混淆后放回？

关于“移出public/js处理后放回”的可行性 #

完全可以这么操作！这种手动的“迁移-处理-回迁”流程在没有构建工具的场景下非常实用，不过有几个细节要注意：

• 一定要备份原始文件：混淆过程可能会破坏代码逻辑（比如如果你的代码有特殊的依赖关系），备份能让你快速恢复。
• 保持目录结构一致：如果public/js里有子文件夹（比如public/js/utils），移出去的时候也要对应创建相同的子目录，避免回迁时路径混乱。
• 临时调整项目引用：处理期间如果要运行项目，记得暂时注释掉HTML或其他文件里对这些JS的引用，避免出现404或加载错误。

用Webpack实现JS混淆的步骤 #

Webpack本身集成了强大的代码压缩混淆能力，最常用的工具是terser-webpack-plugin（Webpack 5已内置，Webpack 4需要单独安装），下面是具体实现步骤：

1. 初始化Webpack（如果还没配置） #

如果你的项目还没引入Webpack，先执行以下命令初始化：

npm init -y
npm install webpack webpack-cli --save-dev

2. 调整文件结构 #

把public/js里的源JS文件迁移到项目根目录下的非public目录，比如src/js（这个目录是Webpack默认的源文件目录，也可以自定义）。这样Webpack会从这个源目录读取文件，处理后输出到public/js。

3. 配置Webpack #

在项目根目录创建webpack.config.js，写入以下基础配置：

const path = require('path');
// Webpack 4需要单独安装并引入：npm install terser-webpack-plugin --save-dev
// const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 入口配置：如果有多个JS文件，写成对象形式
  entry: {
    main: './src/js/main.js',
    utils: './src/js/utils.js'
  },
  // 输出配置：指定输出到public/js，添加哈希值避免浏览器缓存旧文件
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'public/js'),
    // 每次构建前清空输出目录，避免残留旧文件
    clean: true
  },
  // 生产模式下Webpack会自动启用Terser进行混淆压缩
  mode: 'production',
  optimization: {
    minimizer: [
      // 自定义Terser的混淆规则，按需调整
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有console.log语句
            drop_debugger: true // 移除debugger语句
          },
          mangle: {
            // 如果需要保留某些类名/函数名，添加到exclude数组里
            // exclude: ['MyClass', 'myFunction']
            keep_classnames: false, // 不保留类名
            keep_fnames: false // 不保留函数名
          },
          format: {
            comments: false // 移除所有注释
          }
        }
      })
    ]
  }
};

4. 添加构建脚本 #

在package.json里添加一个build命令，方便快速执行构建：

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

5. 执行混淆构建 #

运行以下命令，Webpack就会自动把src/js里的源文件混淆压缩后输出到public/js目录：

npm run build

额外提示 #

• 如果你的项目是React/Vue等框架生成的，通常已经集成了Webpack，只需要修改框架对应的配置文件（比如vue.config.js或craco.config.js）来调整Terser的配置即可。
• 如果你需要更复杂的混淆规则（比如字符串加密、控制流扁平化），可以搭配webpack-obfuscator插件，不过这个插件会增加构建时间，建议只在生产环境使用。

内容的提问来源于stack exchange，提问作者jemz