4.hot-load-replacement配置（react-hot-loaderV4）

什么是热更新

按照前面的配置，更改App.jsx中的内容，保存后，页面上的内容也会实时的变化，这难道不是热更行吗？我刚开始也有这样的疑问。可是，你要注意，目前更改内容保存后，浏览器执行的是刷新操做，至关于F5刷新页面。而热更新就像ajax同样，只会更改修改的那部分，不会引发浏览器的刷新。

如何配置热更新

热更新主要用到的包时react-hot-loader，课程中用的包版本较低，配置比较麻烦（相对于新版本），我在网上搜了一下react-hot-loader的配置，画风基本时这样的。目前react-hot-loader版本为4.8.2版本，根据官网的介绍，如今react-hot-loader能够直接看成正常的依赖，能够不用看成开发依赖。打包时，会自动去掉这个包。根据官网的说明，配置起来也很简单。

• 配置.babelrc文件

{
  "plugins": ["react-hot-loader/babel"]
}

• 将App.jsx导出的App用hot包裹

import { hot } from 'react-hot-loader'
class App extends React.Component {
  render() {
    return (
      <div>This is app</div>
    )
  }
}
export default hot(App)

同时，client的webpack配置中devServer的hot属性设置为true便可
每次启动时，在浏览器的console里面就会出现 [WDS] Hot Module Replacement enabled. 的提示，表明热更新成功。

另外，还有一个注意事项。配置热更新成功后，更改文件内容，在network窗口会发现有新的请求文件，本人浏览器窗口会去请求热更新的文件，请求地址以下

http://localhost:8888/publica31180d047a509a4bdc0.hot-update.json

public后面缺乏'/'，奇怪的是并无报404的错误，仍是能够请求获得。可是最好仍是处理一下，将webpack配置中的publicPath属性值改成'/public/'，以避免之后出现问题。

相关代码位于仓库的2-7分支