electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置_electron react 单例 多窗口

如果您正在使用electron-react-boilerplate进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。

MacOS窗口图像由OpenClipart-Vectors提供，来源Pixabay。

开始之前需要提及的事情！

1. Electron有一个主进程和渲染进程的模式。可以有多个渲染进程，但只有一个主进程。
2. 对于Electron IPC（进程间通信），我们需要一个预加载器。我们可以通过启用节点集成来实现，但这是一个安全隐患。
3. webpack插件HtmlWebpackPlugin为每个入口（块）创建一个html文件。

如果您不想了解如何操作的细节，您可以直接克隆这个仓库并从中学习https://github.com/alielmajdaoui/electron-react-boilerplate-multiple-windows

开发环境设置

在./src文件夹内，创建两个文件夹，settings-main用于主进程文件，settings-renderer用于渲染进程文件。

打开文件.erb/configs/webpack.paths.ts，在以下行之后

const srcRendererPath = path.join(srcPath, 'renderer');
1

添加

const srcSettingsMainPath = path.join(srcPath, 'settings-main');
const srcSettingsRendererPath = path.join(srcPath, 'settings-renderer');
1
2

在同一文件中，导出新变量。

文件.erb/configs/webpack.paths.ts应该看起来像

./erb/configs/webpack.paths.ts

创建设置窗口渲染进程

在settings-renderer文件夹内，创建一个新文件index.ejs

./src/settings-renderer/index.ejs

在同一文件夹settings-renderer内，创建一个新文件index.tsx

./src/settings-renderer/index.tsx

将新的渲染入口添加到Webpack

打开.erb/configs/webpack.config.renderer.dev.ts，并找到以下代码块

  entry: [
    `web
1