Electron-React-Webpack开发环境配置

记录一下Electron + React开发环境的Webpack配置过程，因为我本身很喜欢React，所以当日要用React来开发Electron啦，也写给需要的小伙伴们。

介绍

其实用想用React来开发Electron应用很简单，Electron启动其实就是依赖于浏览器去load一个html，所以其实最主要的就是配置一个React的开发环境，那它load完之后自然就能热更新了，然后注意一下环境去使用不同的加载文件的方法与路径就完事了。

项目配置

其实大部分就是React的Webpack配置，网上一搜一大堆，就不赘述了，说一下几个不一样的地方：

1. 在webpack配置中需要加入这么一项，来说明它打包的是Electron的渲染进程，否则会打包报错。

target: "electron-renderer"

2. 在正式打包时拷贝这三个Electron运行所需要的文件：main.js、icon、package.json

plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.resolve(__dirname, '../main.js'), to: '../build/main.js' }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          { from: path.resolve(__dirname, '../icon.ico'), to: '../build/icon.ico' }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, '../package.json'),      
            to: path.resolve(__dirname, '../build/package.json')
          }
        ]
      }),
    ]

代码中需要注意的地方

开发环境是基于http，和平时开发网页没什么区别，而打包之后加载文件都是通过file协议，所以在加载文件的写法上需要区别开发环境和正式环境。

1. 在main.js中

if (isDev) {   // 开发模式，使用dev-server，支持动态刷新
    win.loadURL(`http://localhost:3004/${path}`)
} else {
    const pathname = Path.join(__dirname, './index.html')
    win.loadURL(url.format({
        pathname,
        protocol: 'file:',
        slashes: true
    }))
}

2. 在渲染进程中

if (__DEBUG) {
    printWindow.loadURL('http://localhost:3004/print.html')
} else {
    printWindow.loadFile('./print.html')
}

项目运行

安装依赖：
npm install
开发环境：
1. npm run start     //dev-server启动
2. npm run ewind     //electron启动
代码打包：
1. npm run build
2. npm run EBuild
使用打包后的代码运行：
npm run ewinb

项目地址

• https://github.com/cylhah/React-Electron-Webpack
• 都放在github啦，喜欢的小伙伴记得star哦。