使用 electron-forge 启动开发服务器时，如何使 webpack 也加载 preload.js

Question

问题

对于我使用 npx create-electron-app <appname> --template=typescript-webpack 创建的 Electron 应用程序，用户需要能够通过单击按钮打开一个新的 BrowserWindow 实例（不是您使用 window.open() 创建的实例）。

由于打开新窗口的主动权来自应用程序的前端/渲染器，因此我必须使用 ipcRenderer 向主进程发送消息，然后我可以在主进程中监听消息以打开一个新的浏览器窗口。

但是，当通过yarn electron-forge start 启动应用程序时，我未能告诉 webpack 还将所需的 preload.js 与 index.js 捆绑在一起。 .webpack 文件夹结构应如下所示：

main
  index.js (main)
  preload.js
renderer
  main_window
    index.html
    index.js (renderer)
  ...

但 preload.js 缺失，导致控制台出错，按钮无法正常工作。

当我在启动 devserver 后手动将 preload.js 复制到正确的位置 (.webpack/main) 时，一切正常，很高兴看到，但这不是一个解决方案。 很确定我的 webpack 配置有问题。

设置

原始 index.ts 和 preload.js 在 src 文件夹中并排放置

当谈到 webpack 或其他类似的服务时，我是一个完全的新手，所以我不知道我自动生成的 webpack 配置有什么问题。它们是这样的：

webpack.main.config.js

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: require("./webpack.rules"),
  },
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
  },
};

webpack.renderer.config.js

const rules = require("./webpack.rules");
const plugins = require("./webpack.plugins");

rules.push({
  test: /\.css$/,
  use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
    { loader: "postcss-loader" },
  ],
});

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
  },
};

webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = [new ForkTsCheckerWebpackPlugin()];

webpack.rules.js

module.exports = [
  {
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
];

如果需要，我可以提供 index.ts 和 preload.js 的源代码以及从渲染器进程调用方法的文件。我很确定虽然它们不是问题，因为一切正常，当我在启动后手动将 preload.js 注入 .webpack/main 时。

Answer 1

你可以使用 webpack 和 electron forge 提供的神奇的全局变量 在magic global variables阅读更多相关信息

希望以下代码对您有所帮助：

用于创建浏览器窗口
preload : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY 属性将有助于捆绑 preload.js 以与其他渲染脚本打包 const mainWindow = new BrowserWindow({ width: 1000, height: 900, webPreferences:{ preload : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, } });

用于加载应用程序的 index.html。

mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

Answer 2

为了将来的参考，总的来说，您可能需要做两件事才能使预加载脚本正常工作：

1. 按照 Anirudh 的建议，在 index.ts 文件中使用 global variables：

// stuff...

// specifically for typescript: 
// the first declare should have been automatically generated
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string; // add this

// other stuff...

const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // change this
    },
  });
  // and all the other things in index.ts.
}

1. 之后，您可能还需要更改 package.json，正如 Clemens 建议的那样。这需要更多的研究，但可以找到 webpack 插件的文档here，其中所有变量都可以通过config > forge > plugins 的 package.json 条目进行操作。因此，关键部分应该如下所示：

        [
          "@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",

                  // -------------- change starts here --------------
                  "preload": {
                    "js": "./src/preload.ts" // or wherever your preload script is written
                  }
                  // --------------  change ends here  --------------
                }
              ]
            }
          }
        ]

我也是 javascript 的初学者，所以我不完全确定它是否正确。希望对您有所帮助！