webpack-obfuscator

Webpack-obfuscator 是一个用于 Webpack 的插件，它集成了 javascript-obfuscator 来对 JavaScript 代码进行混淆，以提高代码的安全性和保护源码不被轻易理解或篡改。以下是关于 webpack-obfuscator 的一些关键信息：

安装

要使用 webpack-obfuscator，首先需要确保你的项目使用的是 Webpack 5，因为该插件需要 Webpack@5。如果依赖 Webpack 4，需要使用 webpack-obfuscator 的旧版本。安装插件时，可以通过 npm 进行安装，并将其添加到项目的 devDependencies 中：

npm install --save-dev webpack-obfuscator@2.5.0 javascript-obfuscator@2.5.0

123

配置

在 Webpack 配置文件中，可以引入并使用 WebpackObfuscator。配置项 obfuscatorOptions 允许你自定义混淆选项，这些选项应该与 javascript-obfuscator 的配置保持一致。此外，还可以设置 excludes 来指定不进行混淆的文件或模块：

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

module.exports = {
  // ... other webpack config
  plugins: [
    new WebpackObfuscator({
      // options for javascript-obfuscator
      obfuscatorOptions: {
        // options here
      },
      excludes: ['**/excluded-file.js']
    })
  ]
};

13

使用 Loader

Webpack-obfuscator 也可以作为 loader 使用，在 webpack 配置中定义一个规则，并将 obfuscator-loader 作为 loaders 的最后一个进行配置。确保使用 enforce: 'post' 标志，以保证 loader 在其他 loaders 之后执行：

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['obfuscator-loader'],
      enforce: 'post',
      // ... other rule options
    }
  ]
}

1

Vue CLI 项目配置

对于使用 Vue CLI 的项目，可以在 vue.config.js 中进行 webpack-obfuscator 的配置。如果只想在生产环境打包时进行代码混淆，而本地开发时不混淆，可以相应地配置 configureWebpack：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new WebpackObfuscator({
        // options here
      })
    ]
  }
  // ... other vue config
};

34

优势

使用 webpack-obfuscator 进行代码混淆可以增加代码的难读性，从而提高代码的安全性。这对于公司代码提供给第三方使用时尤为重要，以防止源码泄露。混淆后的代码虽然功能上与原始代码相同，但阅读和理解的难度大大增加，有效保护了源码安全。 5678