webpack热更新配置

1. 安装 react-hot-loader

npm install --save-dev react-hot-loader

2. webpack配置

const app = ['babel-polyfill', './index']   //单入口
app.unshift('react-hot-loader/patch', 'webpack-dev-server/client?http://' + DEV_SERVER_HOST + ':' + PORT, 'webpack/hot/only-dev-server')

devServer: {
        inline:true,
        open: false,    
        host: DEV_SERVER_HOST,
        contentBase: Paths.DIST,
        publicPath: Paths.PublicPath.DEV,
        port: PORT,
        hot: true
    }

3. babelrc

注意：配置到默认开发环境下，否则生成环境会产生无用代码

//babel配置文件，不需要做修改，因为都配置好了
{
  "presets": [
    ["es2015"],
    "react",
    "stage-0"
  ],
  "plugins": [
    // "react-hot-loader/babel",
    ["transform-runtime", {
      "helpers": false,
      "polyfill": true,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }],
    "transform-decorators-legacy",
    "transform-async-to-generator",
    "transform-do-expressions",
    "syntax-do-expressions",
    "syntax-dynamic-import",
    ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
  ],
  "env": {
    "development": {
     "plugins": [ "react-hot-loader/babel" ]
    }
   }
}

4. 入口js修改

const render = Component =>
    ReactDOM.render(
        <AppContainer>
            <Provider store={store}>
                <Component />
            </Provider>
        </AppContainer>,
        document.getElementById('root')
    );

render(App);

if (module.hot) {
    module.hot.accept()
}