本文主要是介绍electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如果您正在使用electron-react-boilerplate进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。
MacOS窗口图像由OpenClipart-Vectors提供，来源Pixabay。
开始之前需要提及的事情！
- Electron有一个主进程和渲染进程的模式。可以有多个渲染进程，但只有一个主进程。
- 对于Electron IPC（进程间通信），我们需要一个预加载器。我们可以通过启用节点集成来实现，但这是一个安全隐患。
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');
添加
const srcSettingsMainPath = path.join(srcPath, 'settings-main');
const srcSettingsRendererPath = path.join(srcPath, 'settings-renderer');
在同一文件中，导出新变量。
文件.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这篇关于electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
