[聚合文章] 使用Electron构建React+Webpack桌面应用

前言

Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用，可是在使用到React和Webpack时，会遇到一些配置问题，本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。

环境配置

    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "babel-plugin-transform-class-properties": "^6.24.1",    "babel-plugin-transform-object-rest-spread": "^6.26.0",    "babel-preset-env": "^1.6.1",    "babel-preset-react": "^6.24.1",    "css-loader": "^0.28.7",    "electron": "^1.7.9",    "electron-packager": "^10.1.0",    "extract-text-webpack-plugin": "^3.0.2",    "node-sass": "^4.7.2",    "react": "^16.2.0",    "react-dom": "^16.2.0",    "sass-loader": "^6.0.6",    "style-loader": "^0.19.1",    "webpack": "^3.10.0",    "webpack-dev-server": "^2.9.7"

配置webpack.config.js

由于使用默认的Webpack打包，会生成一个很大的bundle文件，在桌面端比较影响性能，而调试的时候却需要较快地生成bundle，可是又需要使用sourcemap来定位bug，所以我们使用一个函数来切换各种环境：

module.exports = (env)=>{  ******  const isProduction = env==='production';  ******  devtool: isProduction ? 'source-map':'inline-source-map',

而我们在package.json文件里，编写以下命令：

"build:dev": "webpack","build:prod":"webpack -p --env production",

就可以较好的切换环境。
以下是全部webpack.config.js：

const webpack = require('webpack');const path = require('path');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = (env)=>{  const isProduction = env==='production';  const CSSExtract = new ExtractTextPlugin('styles.css');  console.log('env='+env);  return {    entry:'./src/app.js',    target: 'electron-renderer',    output:{      path:path.join(__dirname, 'public','dist'),      filename:'bundle.js'    },    module:{      rules:[{        loader: 'babel-loader',        test: /\.js(x)?$/,        exclude: /node_modules/      }, {        test: /\.s?css$/,        use:CSSExtract.extract({          use:[            {              loader:'css-loader',              options:{                sourceMap:true              }            },            {              loader:'sass-loader',              options:{                sourceMap:true              }
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。