[搬运]让 create-react-app 支持热加载

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）出来，便可自由修改。

完。