Electron + React + Webpack 这个组合开发桌面应用还是挺爽的。
如果再搭上 Webpack 的 Hot Module Replacement 那简直完美，不用刷新就搞定。
关于 HMR 的演示可以看 Dan Abramov 的演讲视频 Hot Reloading with Time Travel。
在 Electron 中使用 HMR 碰到的问题是打开的文件是本地的，host 就变成了 file://，
所以监听到变化之后，Webpack 尝试更新模块时，就查找不到 hot-update.json ，然后 Webpack 无法更新模块...
当时这个问题搞疯了我，花了很长时间，所以这篇就是为了记录下当时的坑。
上图出现的情况，当时用的配置就是使用的比较官方的方式, 使用 webpack-dev-server 和 react-hot-loader。
import path from 'path'
import webpack from 'webpack'
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
}然后换成 React Hot Loader 3 试了一下，果然不出所料，还是没能成功。
原本以为问题就是出在 webpack-dev-server 上，所以就把精力集中在替换 webpack-dev-server 上了。
然后用 express + webpack-dev-middleware + webpack-hot-middleware 自己搭建服务。
'use strict'
import express from 'express'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import config from './webpack.config.dev'
const app = express()
const compiler = webpack(config)
const PORT = 3000
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
noInfo: false,
reload: true,
stats: {
colors: true
}
}))
// hot
app.use(webpackHotMiddleware(compiler))
app.listen(PORT, 'localhost', (err) => {
if (err) {
console.error(err)
return
}
console.log(`Listening at http://localhost:${PORT}`)
})
然而还是不行, 最后研究了这个仓库的配置，
发现还有这样的一个配置 target: 'electron-renderer'，然而官方文档上却没有说明。
Note: target: 'electron-renderer' 属性是在 Webpack v1.12.15 版本中加入的 make electron-main and electron-renderer targets works in 1.x。
为了避免更多人步我后尘，就去给 Webpack 文档增加了说明 Compare: configuration。
这时候热替换的问题也就解决了，这个过程还能从提交历史中看到 PupaFM。
But...
当后来有时间再回顾这个问题的时候，一直在想第一种方式应该能解决才对啊，
所以在第一种方式的配置上加了 target: 'electron-renderer'，然而并没有什么软用...
最后再一次查看了一遍 Webpack 的文档，仔细的看了 output.publicPath 这个配置。
output.publicPath
The
publicPathspecifies the public URL address of the output files when referenced in a browser.
For loaders that embed