webpack5 热替换 js css 实现局部更新

·  阅读 802

1.在devServer 中增加 hot:true 设置,只增加此设置会浏览器刷新

image.png

2.安装 react-hot-loader 插件 插件使用

3.安装 @babel/plugin-proposal-decorators 插件 插件使用 增加配置

image.png

不安装此插件会报错Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

4.App页面使用处增加import { hot } from 'react-hot-loader' 及 @hot(module)

image.png

增加以上四步配置能够实现页面js的局部刷新

下面是css 实现局部更新

由于使用的是MiniCssExtractPlugin,所以增加下图所示的配置就可以,但是要安装cross-env 插件,用来区分环境

image.png

亲测有效,如果文章对你有帮助,记得点赞哦

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改