使用Webpack创建Electron应用，并配置React

通过webpack创建一个electron的应用程序

npm init electron-app@latest electron-react-app -- --template=webpack

（electron-react-app是应用的名字）

过程中可能会出现如下报错

npm ERR! request to https://registry.npm.taobao.org failed, reason: certificate has expired

解决方案：

npm config set registry https://registry.npmmirror.com

成功创建electron应用后，其中包含的文件如下：

render.js：预加载脚本（与进程通信有关）

在终端使用命令npm start启动

接下来集成react的环境

npm install --save react react-dom react-router-dom

npm install --save-dev @babel/core @babel/preset-react babel-loader

在配置文件webpack.rules.js中加入以下内容：

{
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  }

这样就可以使用react了

创建Layout组件，作为项目的首页

在src文件夹下创建名为app.jsx的文件，即App组件，其中引入Layout组件，程序中所有的组件都放在App组件中

在index.html中创建一个id=root的容器，将App组件作为程序的根组件放在其中

将renderer.js重命名为renderer.jsx，并将App挂载在root容器中

在这里需要注意的是，重命名为renderer.jsx后，需要更新配置文件中对该文件的引用

(可能在其他文件下，全局搜索以下即可)

还有关于组件引入时需要注意的点：

为了简写，需要配置 Webpack 解析文件时的扩展名，用户在引入模块时就不需要再带扩展名了

到此，一个react+electon程序就成功创建啦

参考：Electron+React 搭建桌面应用-CSDN博客