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

本文主要是介绍electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果您正在使用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');

添加

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】多页面配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---