electron-webpack适配webpack5.x的dev命令配置查看与修改方法

查看electron-webpack实际加载的完整配置 #

electron-webpack CLI自带配置打印能力，无需手动翻阅node_modules下的包源码：

• 执行带调试参数的启动命令：yarn electron-webpack dev --print-config
• 该命令会跳过实际编译流程，将electron-webpack经过环境判断、按主进程/渲染进程/预加载脚本分支生成的全量Webpack配置直接输出到终端，可直接定位到报错提到的optimization.namedModules配置项的具体位置
• 若需要逐行排查配置，可将输出重定向导出为本地文件：执行yarn electron-webpack dev --print-config > webpack-final.config.js，即可拿到完整的最终生效配置文件

不改动包源码的前提下修复Webpack 5兼容性问题 #

由于是通过CLI方式使用electron-webpack，无需对electron-webpack做二次扩展开发，可直接利用项目级配置覆盖钩子完成兼容修改：

• 在项目根目录新建electron-webpack.config.js，写入自定义配置合并逻辑：

  module.exports = {
    webpack: (config) => {
      // 删除Webpack 5已移除的无效配置项
      if (config.optimization) {
        delete config.optimization.namedModules
        // 替换为Webpack 5等效的指定模块ID生成规则
        config.optimization.moduleIds = "named"
      }
      return config
    }
  }
  

• 该配置文件是electron-webpack CLI默认识别的项目级配置入口，无需修改原有启动命令，执行yarn electron-webpack dev时会自动将上述兼容逻辑合并到最终生效的Webpack配置中，不需要改动node_modules内的包源码
• 如果后续遇到其他Webpack 4体系残留配置触发的校验报错，可对照之前导出的全量配置文件，在上述钩子函数中统一做删除、替换处理即可，比如将已废弃的optimization.namedChunks替换为Webpack 5对应的optimization.chunkIds: "named"

注意：不建议直接修改node_modules目录下electron-webpack的内置配置文件，这类修改会在依赖重装后完全丢失，且无法在团队协作中同步生效。

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