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

2024年5月6日 260次阅读来源: geology

什么是热更新

按照前面的配置，更改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/’，以免以后出现问题。