Webpack HMR 热更新原理与配置详解

页面刷新机制主要分为两类：第一类是整体页面刷新，这种方式不保留任何页面状态，实现方式简单直接，通常通过调用 window.location.reload() 完成；第二类是局部刷新，仅更新发生变化的模块，同时保持当前页面状态不变，例如复选框的选中状态或输入框的内容得以保留。

Webpack 热更新（Hot Module Replacement，简称 HMR，后文统一使用 HMR 指代）是一项核心功能，它允许在不完全刷新整个页面的情况下，仅更新代码发生变动的模块。

HMR 在日常开发中能显著提升开发体验和效率，节省大量时间。引用官方文档的描述，其核心优势在于：

HMR 功能允许在应用程序运行过程中动态替换、添加或删除模块，而无需重新加载整个页面。主要通过以下方式加速开发：

• 保留在完全重新加载页面期间丢失的应用程序状态。
• 只更新变更内容，以节省宝贵的开发时间。
• 在源代码中对 CSS / JS 进行修改，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。

1. 热更新原理

Webpack 的热模块替换（Hot Module Replacement，HMR）是一种在不完全刷新页面的情况下更新应用代码的技术，从而提高了开发效率。以下是 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热更新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！