【八股系列】谈谈关于对webpack热更新的原理？

🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【为什么会有webpack配置？webpack的构建流程是什么？】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

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 添加该插件。