React 官方的 create-react-app 很好用，可以轻松的构建 React 项目，但也有一些小痛点，比如对热加载的支持不好。
要让 create-react-app 支持热加载，需要做一些配置上的修改。本文搬运至 http://joshbroton.com/add-react-hot-reloading-create-react-app/。
1.弹射 create-react-app 配置
npm run eject
通过该命令可以将 create-react-app 的配置弹射到当前工作目录下。
2.安装 react-hot-loader
注：这里需要安装 next 版本。
npm install --save-dev react-hot-loader@next
3.安装 babel 的 stage-x 支持
npm install --save-dev babel-parset-stage-1
4.修改 package.json 中的 babel 配置
"babel": {
"presets": [
"react-app",
"stage-1"
],
"plugins": [
"react-hot-loader/babel"
]
},
5.修改 webpack.config.dev.js 配置文件，在入口处加上如下配置
module.exports = {
...
entry: [
'react-hot-loader/patch',
...
6.在入口文件中引入 AppContainer 组件，所有的组件都需要使用该组件包裹
import {AppContainer} from 'react-hot-loader';
const render = ( Component ) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById("root")
);
}
render(ROOT);
if(module.hot){
module.hot.accept(ROOT, () => {
render(ROOT)
});
}
这里定义了一个 render 函数，组件需要更新时直接调用 render 函数即可。
7.如何使 create-react-app 支持异步路由加载
使 create-react-app 支持路由加载，可在 webpack.config.dev.js 和 webpack.config.prod.js 做以下修改：
1）确保 output 选项中有以下配置：
...
chunkFilename: 'static/js/[name].chunk.js',
...
2）确保 plugins 中有以下配置：
...
new webpack.optimize.CommonsChunkPlugin({ name:'common', filename:'static/js/common.js'}),
...
如果是生产环境，建议 chunk 文件名加上 hash 字符串以阻止浏览器缓存：
...
new webpack.optimize.CommonsChunkPlugin({ name:'common', filename:'static/js/common.[chunkhash:8].js'}),
...
我们可以自由定制 create-react-app 的配置，只需将配置弹射（eject）出来，便可自由修改。
完。
