webpack热更新的原理及实现
刷新分为两种：一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()；另一种只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。
Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新代码变动的模块，是 Webpack 内置的最有用的功能之一。
HMR 的好处，在日常开发工作中体会颇深：节省宝贵的开发时间、提升开发体验。引用官网的描述来概述一下：
HMR 功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
- 保留在完全重新加载页面期间丢失的应用程序状态。
- 只更新变更内容，以节省宝贵的开发时间。
- 在源代码中对 CSS / JS 进行修改，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。
1. 热更新原理
Webpack 的热模块替换（Hot Module Replacement，HMR）是一种在不完全刷新页面的情况下更新应用代码的技术，从而提高了开发效率。以下是 HMR 的核心原理：
| 步骤 | 描述 |
|---|---|
| 1 | 开发者使用 webpack-dev-server 启动本地开发服务器，提供静态文件服务并支持 WebSocket 实时通信。 |
| 2 | webpack-dev-server 构建应用时，在输出的 JavaScript 文件中注入 HMR 运行时代码，处理更新通知。 |
| 3 | Webpack 配置 watch 模式，监听源代码文件变化，发现变化后开始重新编译。 |
| 4 | 编译完成，新模块版本生成并存储在内存，启用 HMR 时不刷新页面，准备更新包。 |
| 5 | 通过 WebSocket 长连接，webpack-dev-server 通知客户端哪些模块有更新。 |
| 6 | HMR 运行时尝试应用更新，调用模块的 HMR 接口，替换旧模块实例（若支持）。 |
| 7 | 模块可接受或拒绝更新，有副作用则拒绝并提示手动刷新。 |
| 8 | 更新失败，Webpack 运行时回滚到之前状态，避免应用崩溃。 |
| 9 | 对于不支持 HMR 或无法更新的模块，开发者可选择手动刷新页面。 |
2. 热更新配置
启用 webpack 的 模块热替换 特性：
webpack.config.js
module.exports = {
//...
devServer: {
hot: true,
},
};
通过命令行使用:
npx webpack serve --hot
如需禁用：
npx webpack serve --no-hot
启用模块热替换功能，在构建失败时不刷新页面作为回退，使用 hot: 'only'：
webpack.config.js
module.exports = {
//...
devServer: {
hot: 'only',
},
};
通过命令行使用：
npx webpack serve --hot only
提示
从webpack-dev-server v4开始，HMR是默认启用的。它会自动应用webpack.HotModuleReplacementPlugin，这是启用HMR所必需的。因此当hot设置为true或者通过CLI设置--hot，你不需要在你的webpack.config.js添加该插件。
到此这篇关于webpack热更新的原理及实现的文章就介绍到这了,更多相关webpack热更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们来学习一种名为图像预装载（image preloading）的小技巧来提高图像访问速度，一些浏览器试图通过在本地缓存中保存这些图片来解决此问题，感兴趣的朋友可以了解下2013-03-03
这篇文章主要介绍了JS实现的车标图片提示效果代码,涉及JavaScript鼠标事件触发页面元素遍历修改的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了微信小程序实现同时上传多张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这是一款真正的JavaScript伸展收缩型菜单，鼠标放上看一看，是不是很酷？鼠标划出菜单项的时候，背景会伸长。菜单没有加链接，想用的自己加，再美化一下，绝对够个性吧。2015-11-11
这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript手写Promise核心原理，promise 可以说是出场率很高的api了，这篇文章手写一版promise,可以加强对promise的认识2022-06-06
javascript匿名函数中的''return function()''作用
这篇文章主要介绍了javascript匿名函数中的'return function()'作用介绍,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
今天小编就为大家分享一篇layui实现数据表格自定义数据项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
控制台报错:Cannot access 'xxx' before initializatio
这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
所谓骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容,这篇文章主要给大家介绍了关于微信小程序骨架屏的应用与实现的相关资料,需要的朋友可以参考下2022-05-05
最新评论