如何配置webpack打包node模块 解决Electron生产构建依赖缺失问题

问题核心原因 #

electron-react-boilerplate默认webpack配置通过webpack-node-externals将绝大多数node_modules下的依赖标记为外部依赖，不会打入生产构建产物；同时whatsapp-web.js依赖的puppeteer-core附带二进制Chromium资源、存在动态路径引用逻辑，会被默认规则直接排除，导致生产环境运行时找不到模块。

分步配置方案 #

1. 修改主进程webpack配置 #

找到主进程webpack配置文件（旧版本路径为根目录webpack.main.config.js，v4+版本路径为.erb/configs/webpack.config.main.prod.ts），调整externals规则的白名单，强制将whatsapp-web.js及其核心依赖纳入打包范围：

const nodeExternals = require('webpack-node-externals');

module.exports = {
  // 保留原有其他配置不变
  externals: [
    nodeExternals({
      allowlist: [
        'whatsapp-web.js',
        'puppeteer-core',
        'node-webpmux',
        'fluent-ffmpeg'
      ]
    })
  ],
  node: {
    __dirname: false,
    __filename: false
  }
};

2. 修正渲染进程配置（如有跨进程引用） #

whatsapp-web.js本身设计为主进程运行模块，不建议直接在渲染进程引入。如果你的代码存在渲染进程直接引用的逻辑，找到渲染进程webpack配置，删除externals字段中对whatsapp-web.js的commonjs外部映射规则即可。

3. 调整electron-builder打包规则 #

whatsapp-web.js依赖的Chromium二进制、ffmpeg等二进制资源无法被webpack静态分析识别，需要在package.json的build配置段添加文件包含、asar解包规则，确保资源被正确拷贝到生产包：

{
  "build": {
    // 保留原有其他配置不变
    "files": [
      "dist/**/*",
      "node_modules/whatsapp-web.js/**/*",
      "node_modules/puppeteer-core/**/*",
      "node_modules/node-webpmux/**/*",
      "node_modules/fluent-ffmpeg/**/*"
    ],
    "asarUnpack": [
      "node_modules/puppeteer-core/.local-chromium/**/*",
      "node_modules/fluent-ffmpeg/**/*"
    ]
  }
}

4. 清理缓存重新构建 #

• 删除项目根目录下的dist、release、node_modules/.cache缓存目录
• 执行npm run build完成主进程、渲染进程代码构建
• 执行npm run package生成生产安装包，验证模块加载逻辑

注意：所有whatsapp-web.js相关业务逻辑建议全部放在主进程实现，通过Electron IPC通道和渲染进程通信，避免渲染进程上下文隔离、沙箱机制导致的模块运行异常。

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