前言
Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用，可是在使用到React和Webpack时，会遇到一些配置问题，本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。
环境配置
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，所以我们使用一个函数来切换各种环境：
{
******
const isProduction = env==='production';
******
devtool: isProduction ? 'source-map':'inline-source-map',
而我们在package.json文件里，编写以下命令：
就可以较好的切换环境。
以下是全部webpack.config.js：
{
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
}
}
]
})
}]
},plugins:[
CSSExtract
],devtool: isProduction ? 'source-map':'inline-source-map',devServer:{
contentBase: path.join(__dirname,'public'),historyApiFallback:true,publicPath:'/dist/'
}
};
}
注意：target: 'electron-renderer',让我们的App在调试时只能在Electron下作用。
React
本次编写的是一个简单的显示时间的App，React 模块如下：
{
this.setState(()=>{
return {
time:this.getTime()
}
});
},1000);
}
render(){
let timetext = this.state.time;
return (
);
}
}
export default Time;
{timetext}
Electron
本次的App不涉及复杂的Electron API，仅仅作为展示的容器：
{
mainWindow = new BrowserWindow({});
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});
index.html
