webpack通过react-hot-loader实现热更新(配置)

258 阅读1分钟

在当前打包工具百花齐放下,大家很多项目几乎也不需要再去手动配置webpack了,今天vite打包速度又优化了多少,明天turbopack突然也不装了,后天rspack又更新了总之确实在前端领域下我们编写代码的效率越来越快了,但一些古老的项目下想要集成这些工具确实也存在难度,依靠webpack的devserver如果项目庞大,修改小小的地方每次刷新都够我们泡壶茶了,废话不多说今天就看看如何实现热刷新。

官方文档网址: github.com/gaearon/rea…

安装react-hot-loader

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

1.  首先在webpack配置

image.png

image.png

image.png

image.png

需要注意顺序我们项目入口文件放在下面。

__webpack_hmr 前面注意ip和端口,这是热更新的socket自行修改。

2.  如果采用服务端渲染则在webpack.config.js目录下 创建同级名字 server.js将以下代码贴入即可(可略过)。

image.png 这里的publicPath 和上面webpack上面output路径保持一致。

3. 接下来前往我们最高层级的组件一般就是router包裹的组件用hot包裹 这样就能自动修改我们的组件了

image.png 最后渲染该组件就可以实现热刷新了。 image.png