如何像GitHub Desktop一样结合Webpack与angular-electron构建Electron应用

一、基于angular-electron模板改造（替代直接替换文件） #

不要直接替换现有模板的renderer文件，angular-electron本身已集成Webpack，在此基础上调整配置更高效：

1. 初始化基础项目
   用angular-electron模板新建项目，它已处理Electron主进程与Angular渲染进程的基础通信和Webpack配置：

   git clone https://github.com/maximegris/angular-electron.git
   cd angular-electron
   npm install
   

2. 调整主进程打包路径
   找到项目根目录下的webpack.main.config.js，修改output配置，将主进程产物输出到dist/app/main：

   output: {
     path: path.join(__dirname, 'dist/app/main'),
     filename: 'main.js' // 可自定义主进程文件名
   }
   

3. 调整Angular渲染进程打包路径
   编辑angular.json，修改architect -> build -> options -> outputPath为dist/app/render：

   "outputPath": "dist/app/render"
   

   同时调整Electron主进程加载渲染进程的路径（主进程文件默认在src/main下）：

   // src/main/main.ts
   mainWindow.loadURL(`file://${__dirname}/../render/index.html`);
   

二、模仿GitHub Desktop的Webpack拆分配置 #

GitHub Desktop核心是将主进程、渲染进程的Webpack配置完全分离，可在angular-electron基础上进一步拆分：

1. 拆分Webpack配置文件
   • 新建webpack.main.prod.config.js专门处理主进程生产环境打包，配置代码压缩、Node环境变量等：

     const path = require('path');
     const TerserPlugin = require('terser-webpack-plugin');
     
     module.exports = {
       entry: './src/main/main.ts',
       target: 'electron-main',
       mode: 'production',
       output: {
         path: path.join(__dirname, 'dist/app/main'),
         filename: 'main.js'
       },
       module: {
         rules: [
           {
             test: /\.ts$/,
             use: 'ts-loader',
             exclude: /node_modules/
           }
         ]
       },
       resolve: {
         extensions: ['.ts', '.js']
       },
       optimization: {
         minimizer: [new TerserPlugin()]
       }
     };
     

   • Angular渲染进程打包保留Angular CLI配置，确保angular.json中outputPath指向dist/app/render。
2. 配置打包脚本
   在package.json中添加自定义打包命令，先打包Angular渲染进程，再打包Electron主进程：

   "scripts": {
     "build:renderer": "ng build --prod",
     "build:main": "webpack --config webpack.main.prod.config.js",
     "build:electron": "npm run build:renderer && npm run build:main",
     "package": "electron-builder --dir"
   }
   

3. 配置electron-builder输出结构
   编辑electron-builder.json，指定打包后的exe文件和资源路径：

   {
     "directories": {
       "output": "dist",
       "buildResources": "resources"
     },
     "files": [
       "dist/app/main/**/*",
       "dist/app/render/**/*"
     ],
     "win": {
       "target": "nsis",
       "icon": "src/assets/icon.ico"
     }
   }
   

   打包后dist目录会生成exe文件，dist/app/main和dist/app/render保留对应产物。

三、解决替换文件失败的常见问题 #

直接替换文件失败多因路径匹配、资源引用或缓存问题：

• 路径不匹配：检查Electron主进程loadURL的路径是否与Angular打包路径一致。
• 资源引用问题：在angular.json中设置architect -> build -> options -> baseHref为./，确保Angular打包资源使用相对路径：

  "baseHref": "./"
  

• 缓存问题：添加清理旧dist目录的脚本，打包前执行清理：

  "scripts": {
    "clean": "rimraf dist"
  }
  

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