使用 webpack devServer 进行电子锻造

【问题标题】：Electron-forge with webpack devServer使用 webpack devServer 进行电子锻造
【发布时间】：2021-06-28 10:16:14
【问题描述】：

我使用 npx create-electron-app electron --template=webpack 创建了一个带有电子锻造的应用程序。

然后我做了npm install webpack-dev-server

在我的 webpack.renderer.config.js 中，我开始添加带有 proxy 和 before 部分的 devServer 部分，但是当我使用 npm run start 时，这些部分被忽略了。

npm run start 运行 electron-forge start，这就是我认为问题所在，因为我无法直接访问 webpack 调用以获取 webpack serve ...

需要什么才能让 webpack 开发服务器与 electron 一起运行？

【问题讨论】：

标签： electron webpack-dev-server electron-forge electron-webpack

【解决方案1】：

webpack-dev-server 已被Electron-Forge 使用，如Electron-forge Webpack documentation 所示

在开发中，我们启动 webpack-dev-server 实例来为您的渲染器进程提供支持，在产品中我们只是构建静态文件。

对于渲染器：它会为您刷新。对于 main，如文档中所述，您必须在终端中键入“rs”才能“重新加载”应用程序。

对于主进程，只需在您启动 electron-forge 的控制台中输入 rs，我们将使用新的主进程代码为您重新启动您的应用程序。

如果你想访问 webpack 日志服务器：http://localhost:9000/（9000 是 loggerPort 在plugins-webpack 配置中的默认值）

// forge.config.js (or package.json)
 plugins: [
    ['@electron-forge/plugin-webpack',
      {
        // Renderer server port
        port: 3000,
        //  Webpack logger port
        loggerPort: 9000,
        mainConfig: './webpack...',
        ...
      }
     ],

【讨论】：