前因
当前应用中有个模块实验着采用 react 来做，想看看这东西能否解决之前的一些痛点。此模块采用 webpack 打包，于是顺便加上了热加载功能。
由于 HTML 页面是现有系统生成的，所以需要在开发环境下集成热加载功能有些要点需要注意，仔细翻了官方文档之后搞定。
下面把一些要点记录下来。
更新说明
一开始采用的是 react-hot-loader，不过在配合 antd 的时候老是报错：
Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null
后来按照 Antd issue 的提示，换成了 react-transform 后问题解决。
环境说明
- 现有系统服务器端口为 8080
- webpack 热加载服务端口为 3000
- 测试模块名为：testModule
- webpack 配置已经实现，但没有热加载相关配置（这些配置转移到了启动脚本中了，参见下面源码）
实现方式
webpack 热加载支持两种方式
一种是直接命令行来搞：
webpack-dev-server ...
不过这种方式比较死板，不推荐。
还是采用专门写个 js 来定义，然后采用 npm scripts 命令来执行：
npm run start:testModule
准备工作
此处假定已经配置好 webpack 打包环境，下面需要安装热加载相关组件：
npm install --save-dev webpack-dev-server
（此条已作废）npm install --save-dev react-hot-loader
npm install --save-dev babel-preset-react-hmre
babel 相关配置
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
热加载服务启动脚本：testModuleServer.js
/*eslint-disable no-console */
var WebpackDevServer = require('webpack-dev-server');
var webpack = require('webpack');
// 引入现有 webpack 设置
var config = require('../webpack.config.js');
// webpack 热加载服务的端口号
var port = 3000;
// 在 webpack config 中将需要的模块的 entry 中增加下面两条设置
// 采用的 only-dev-server 而不是 dev-server 是为了在语法出错的时候不会重载浏览器页面
config.entry.testModule.unshift(
`webpack-dev-server/client?http://0.0.0.0:${port}`,
'webpack/hot/only-dev-server'
);
// 我的 babel loader 位于第一个位置，所以这儿直接采用 [0] 来重新设置此 loader
// 加上了 react-hot 来处理 babel 编译后的源码
// 由于改用 react-transform，所以下面设置也作废
// config.module.loaders[0].loader = 'react-hot!babel';
// publicPath 必须设置，这是在现有 HTML 页面中嵌入 script的 路径
// 如果不设置，热加载生成的一些内部脚本将会无处依存
config.output.publicPath = `http://localhost:${port}/assets/`;
// 在 webpack 配置中增加热加载插件
// 这个必须有，否则即使下面的 hot: true 设置了也没用
// 但是也要注意一下源配置文件中是否已经设置过了，不要重复设置
// 我的建议是原配置中不要牵扯任何跟热加载有关的东西，保持纯净
config.plugins.push(new webpack.HotModuleReplacementPlugin());
var compiler = webpack(config);
// 下面是具体的服务设置
var server = new WebpackDevServer(compiler, {
// 这个显然必须有
// 需要注意的是这儿的这个属性和命令行中的同名属性有所区别
// 这儿设置了并不会自动增加 HotModuleReplacementPlugin
// 所以上面才需要设置一个
hot: true,
// 注意：这个属性也必须设置，且与上面的 publicPath 中的相应位置一致
// 否则也不起作用
publicPath: "/assets/",
stats: { colors: true }
//historyApiFallback: true
});
server.listen(port);
至此 webpack 部分设置完毕。
react 相关设置（已作废）
由于换用了 react-transform，所以 react 相关设置已作废
:bangbang: 如果你的 react 是直接采用 webpack 打包的话，下面设置可以忽略。
不过我为了节省编译时间，是把 react 和 react-dom 直接在 HTML 中引入的，所以这儿还需要做一些额外设置。
在模块入口文件（一般为 index.js 吧）中一般有：
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
将此部分代码赋值给一个变量，然后增加热加载相关代码（参考）：
var rootInstance = ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
if (process.env.NODE_ENV !== 'production') {
if (module.hot) {
require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
getRootInstances: function () {
// Help React Hot Loader figure out the root component instances on the page:
return [rootInstance];
}
});
}
}
npm 命令
在 package.json 的 scripts 部分增加一行：
"start:testModule": "NODE_ENV=development node ./server/testModuleServer.js"
最后执行：
npm run start:testModule
搞定。