如何在Electron-Forge Typescript+webpack项目中使用Electron-Builder

核心问题 #

你的判断正确，@electron-forge/plugin-webpack会把主进程、预加载脚本、渲染层资源全部构建到.webpack目录下，你当前的electron-builder配置没有指定打包该目录，也没有适配生产环境的资源加载逻辑，所以打包后找不到资源触发白屏。

解决步骤 #

• 第一步：修改package.json的main字段，指向构建后的主进程入口

  "main": ".webpack/main/index.js"
  

• 第二步：更新electron-builder配置，添加files字段指定要打包的资源

  "build": {
    "appId": "cloudapp",
    "files": [
      "package.json",
      ".webpack/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "output": "builder-dist"
    },
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "./src/images/cloudappLogo Icon.ico",
      "requestedExecutionLevel": "requireAdministrator"
    },
    "nsis": {
      "installerIcon": "./src/images/cloudappIcon.ico",
      "uninstallerIcon": "./src/images/cloudappLogo Icon.ico",
      "uninstallDisplayName": "cloudapp",
      "license": "license.txt",
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
  

• 第三步：修改打包脚本，先执行forge构建生成产物，再执行electron-builder打包，在package.json的scripts中添加：

  "scripts": {
    "pack:nsis": "electron-forge package && electron-builder"
  }
  

• 第四步：检查主进程中渲染页面的加载逻辑，适配生产环境的本地文件路径，参考写法：

  import * as path from 'path';
  
  // 开发环境下forge会自动注入NODE_ENV为development
  const isDev = process.env.NODE_ENV === 'development';
  const mainWindow = new BrowserWindow({
    // 你的窗口配置
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  
  if (isDev) {
    // 开发环境加载本地dev server地址，entryPoint的name对应路径后缀
    mainWindow.loadURL('http://localhost:3000/main_window');
  } else {
    // 生产环境加载构建后的本地html文件
    mainWindow.loadFile(path.join(__dirname, '../renderer/main_window/index.html'));
  }
  

调试排查 #

如果修改后仍白屏，找到electron-builder生成的win-unpacked目录下的exe文件，启动后按F12打开开发者工具，查看控制台报错即可精准定位问题。

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