You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何使用WebPack仅处理自有代码,不触及第三方依赖?

如何让Webpack仅混淆自有代码,不影响第三方依赖

问题根源

你之前的两种配置都没正确隔离第三方依赖:

  • 插件方式中,webpack-obfuscator的排除规则写法无效;
  • Loader方式未添加排除逻辑,导致所有JS文件(包括node_modules内的第三方代码)都被混淆,进而引发运行错误。

正确配置方案

方案1:插件式(推荐)

通过精准的includeexclude规则,限定仅处理自有代码:

import path from 'node:path';
import type { Configuration } from 'webpack';
import { rules } from './webpack.rules';
import WebpackObfuscator from 'webpack-obfuscator';

export const mainConfig: Configuration = {
  entry: "./src/index.ts",
  module: {
    rules
  },
  plugins: [
    new WebpackObfuscator(
      {
        sourceMap: true,
        renameProperties: true,
        rotateStringArray: true,
        // 仅处理src目录下的TS/JS文件
        include: [/src\/.+\.(ts|js)$/]
      },
      [/node_modules\/.+/] // 强制排除所有第三方依赖
    )
  ],
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
    alias: {
      "@domain": path.resolve(__dirname, "src/domain"),
      "@platform": path.resolve(__dirname, "src/platform"),
      "@build_src": path.resolve(__dirname, "build_src")
    }
  }
};

方案2:Loader式

修改Loader规则,通过includeexclude隔离自有代码与第三方依赖:

import type { ModuleOptions } from 'webpack';
import WebpackObfuscator from 'webpack-obfuscator';
import path from 'node:path'

export const rules: Required<ModuleOptions>["rules"] = [
  // 保留原有native模块处理规则
  {
    test: /native_modules[/\\].+\.node$/,
    use: "node-loader"
  },
  {
    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: "@vercel/webpack-asset-relocator-loader",
      options: {
        outputAssetBase: "native_modules"
      }
    }
  },
  // 修改混淆Loader规则
  {
    test: /\.(ts|js)$/,
    enforce: 'post',
    include: path.resolve(__dirname, 'src'), // 仅处理src目录下的文件
    exclude: /node_modules/, // 排除第三方依赖
    use: {
      loader: WebpackObfuscator.loader,
      options: {
        rotateStringArray: true,
        renameProperties: true,
        sourceMap: true
      }
    }
  }
];

额外注意事项

  • 若Electron区分主进程和渲染进程配置,需在两个配置文件中都添加相同的隔离规则;
  • renameProperties选项可能会破坏依赖属性名反射的代码,但仅作用于自有代码时,只要你的代码未使用此类逻辑即可安全使用;
  • 混淆完成后务必完整测试Electron应用的启动与功能,避免因混淆导致的隐性错误。

内容的提问来源于stack exchange,提问作者RareScrap

火山引擎 最新活动