共计 902 个字符，预计需要花费 3 分钟才能阅读完成。
什么是热更新
按照前面的配置，更改 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 分支