在当前打包工具百花齐放下,大家很多项目几乎也不需要再去手动配置webpack了,今天vite打包速度又优化了多少,明天turbopack突然也不装了,后天rspack又更新了总之确实在前端领域下我们编写代码的效率越来越快了,但一些古老的项目下想要集成这些工具确实也存在难度,依靠webpack的devserver如果项目庞大,修改小小的地方每次刷新都够我们泡壶茶了,废话不多说今天就看看如何实现热刷新。
官方文档网址: github.com/gaearon/rea…
安装react-hot-loader
npm install react-hot-loader --save-dev
1. 首先在webpack配置
需要注意顺序我们项目入口文件放在下面。
__webpack_hmr 前面注意ip和端口,这是热更新的socket自行修改。
2. 如果采用服务端渲染则在webpack.config.js目录下 创建同级名字 server.js将以下代码贴入即可(可略过)。
这里的publicPath 和上面webpack上面output路径保持一致。
3. 接下来前往我们最高层级的组件一般就是router包裹的组件用hot包裹 这样就能自动修改我们的组件了
最后渲染该组件就可以实现热刷新了。