Angular开发Electron应用打包后main.js引入依赖报Cannot find module错误

问题根因 #

• 你当前的webpack仅针对Angular渲染层代码打包，配置的target为electron-renderer，入口是Angular侧的src/main.ts，存放Electron主逻辑的main.js完全没有经过编译处理，其内部的require会直接读取运行时的node_modules依赖，不会被提前打包进产物。
• 你的copy脚本仅将根目录的package.json复制到dist目录，没有将主进程用到的依赖对应的安装包同步到dist下，electron-packager打包时只会读取打包目标目录（dist）下的依赖，不会读取根目录的node_modules。
• 你将主进程依赖移到devDependencies的操作是错误的，devDependencies不会被electron-packager纳入最终打包产物。

修复步骤 #

1. 调整依赖配置 #

将所有主进程用到的依赖（electron-regedit、electron-log等）全部移回package.json的dependencies字段。

2. 调整打包流程（二选一即可，优先选方案1） #

方案1：单独打包主进程代码

新增主进程专属webpack配置文件webpack.main.js，参考配置如下：

const path = require('path');
const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  target: 'electron-main',
  entry: path.join(__dirname, 'main.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  resolve: {
    extensions: ['.js'],
  },
  // 声明原生模块为外部依赖，不做打包
  externals: {
    'electron': 'commonjs electron',
    'electron-regedit': 'commonjs electron-regedit',
    'electron-log': 'commonjs electron-log'
  },
  node: {
    __dirname: false,
    __filename: false
  }
};

修改npm脚本，新增主进程打包步骤：

"build:main": "cross-env NODE_ENV=production webpack --config webpack.main.js",
"bundle:windows": "npm-run-all -s build:prod build:main copy package:windows"

调整Electron启动入口为dist目录下的main.bundle.js即可。

方案2：直接同步依赖到打包目录

修改npm脚本，将生产环境依赖同步到dist目录：

"prune:prod": "npm prune --production",
"copy": "copyfiles main.js package.json menu/* resources/* node_modules/**/* dist",
"bundle:windows": "npm-run-all -s build:prod prune:prod copy package:windows"

该方案会导致打包体积偏大，仅适合临时验证使用。

3. 校验electron-packager配置 #

检查你package:windows脚本调用的打包配置文件，确保打包目标目录指向dist，且prune参数设为true，会自动修剪掉node_modules中的开发依赖减少体积。

4. 额外校验项 #

electron-regedit包含原生模块，打包前需要使用electron-rebuild对原生模块做对应Electron版本的重编译，避免出现模块版本不兼容错误。

内容的提问来源于stack exchange，提问作者João Durante