4.hot-load-replacement配置(react-hot-loaderV4)

1

什么是热更新

按照前面的配置,更改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分支


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...