webpack热更新的原理及实现

　　目录

　　刷新分为两种：一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()；另一种只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。

　　Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新代码变动的模块，是 Webpack 内置的最有用的功能之一。

　　HMR 的好处，在日常开发工作中体会颇深：节省宝贵的开发时间、提升开发体验。引用官网的描述来概述一下：

　　HMR 功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

　　1. 热更新原理

　　的热模块替换（）是一种在不完全刷新页面的情况下更新应用代码的技术，从而提高了开发效率。以下是 的核心原理：

　　步骤描述1开发者使用 启动本地开发服务器，提供静态文件服务并支持 实时通信。2 构建应用时，在输出的 文件中注入 运行时代码，处理更新通知。3Webpack 配置 模式，监听源代码文件变化，发现变化后开始重新编译。4编译完成，新模块版本生成并存储在内存，启用 时不刷新页面，准备更新包。5通过 长连接， 通知客户端哪些模块有更新。6 运行时尝试应用更新，调用模块的 接口，替换旧模块实例（若支持）。7模块可接受或拒绝更新，有副作用则拒绝并提示手动刷新。8更新失败， 运行时回滚到之前状态，避免应用崩溃。9对于不支持 或无法更新的模块，开发者可选择手动刷新页面。

　　2. 热更新配置

　　启用 的 模块热替换 特性：

　　webpack.config.js

　　module.exports = {

　　//...

　　devServer: {

　　hot: true,

　　},

　　};

　　通过命令行使用:

　　npx webpack serve --hot

　　如需禁用：

　　npx webpack serve --no-hot

　　启用模块热替换功能，在构建失败时不刷新页面作为回退，使用 ：

　　webpack.config.js

　　module.exports = {

　　//...

　　devServer: {

　　hot: 'only',

　　},

　　};

　　通过命令行使用：

　　npx webpack serve --hot only

　　提示

　　从 开始， 是默认启用的。它会自动应用 ，这是启用 所必需的。因此当 设置为 或者通过 设置 ，你不需要在你的 添加该插件。

　　到此这篇关于webpack热更新的原理及实现的文章就介绍到这了,更多相关webpack热更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: