如何使用WebPack仅处理自有代码,不触及第三方依赖?
如何让Webpack仅混淆自有代码,不影响第三方依赖
问题根源
你之前的两种配置都没正确隔离第三方依赖:
- 插件方式中,
webpack-obfuscator的排除规则写法无效; - Loader方式未添加排除逻辑,导致所有JS文件(包括
node_modules内的第三方代码)都被混淆,进而引发运行错误。
正确配置方案
方案1:插件式(推荐)
通过精准的include和exclude规则,限定仅处理自有代码:
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规则,通过include和exclude隔离自有代码与第三方依赖:
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




