js与preload进程调用方法的文件(图)

问题

对于我使用 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

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 时。