如何为Electron Forge Webpack模板的多窗口配置不同预加载脚本

要给不同窗口指定独立的预加载脚本，只需按以下步骤扩展现有配置：

1. 在package.json中添加新的预加载入口 #

在config.electronForge.plugins的Webpack配置里，为每个需要独立预加载脚本的窗口新增入口配置，示例如下：

{
  "config": {
    "electronForge": {
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.ts"
                  }
                },
                {
                  "html": "./src/second-window.html",
                  "js": "./src/second-renderer.ts",
                  "name": "second_window",
                  "preload": {
                    "js": "./src/second-preload.ts"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  }
}

Electron Forge会自动为每个入口生成对应的预加载常量，比如上述配置会生成MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY和SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY，分别对应各自的预加载脚本文件。

2. 在主进程中引用对应预加载常量 #

创建窗口时，直接使用生成的常量作为preload路径：

import { app, BrowserWindow } from 'electron';

// 创建主窗口
function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
}

// 创建第二个窗口
function createSecondWindow() {
  const secondWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      preload: SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });
  secondWindow.loadURL(SECOND_WINDOW_WEBPACK_ENTRY);
}

app.whenReady().then(() => {
  createMainWindow();
  createSecondWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createMainWindow();
      createSecondWindow();
    }
  });
});

3. 验证运行 #

启动应用后，不同窗口会自动加载对应的预加载脚本，不管是调试还是发布模式，Electron Forge都会自动处理脚本的编译和路径解析工作。

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