Electron-React-Webpack开发环境配置

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

介绍

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

项目配置

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

  1. 在webpack配置中需要加入这么一项,来说明它打包的是Electron的渲染进程,否则会打包报错。
target: "electron-renderer"
  1. 在正式打包时拷贝这三个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
    }))
}
  1. 在渲染进程中
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哦。

你可能感兴趣的:(Electron-React-Webpack开发环境配置)