这是我参与「第五届青训营 」伴学笔记创作活动的第8天

Webpack 知识体系

HMR 全称 Hot Module Replacement，中文语境通常翻译为模块热更新，它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。 HMR 最初由 Webpack 设计实现，至今已几乎成为现代工程化工具必备特性之一。 模块代码的替换逻辑可能非常复杂，幸运的是我们通常不太需要对此过多关注，因为业界许多 Webpack Loader 已经提供了针对不同资源的 HMR 功能，例如：

• style-loader 内置 Css 模块热更
• vue-loader 内置 Vue 模块热更
• react-hot-reload 内置 React 模块热更接口

因此，站在使用的角度，只需要针对不同资源配置对应支持 HMR 的 Loader 即可，很容易上手。 module.hot.accept 是 HMR 运行时暴露给用户代码的重要接口之一，它在 Webpack HMR 体系中开了一个口子，让用户能够自定义模块热替换的逻辑。module.hot.accept 它接受两个参数：

• path：指定需要拦截变更行为的模块路径
• callback：模块更新后，将最新模块代码应用到运行环境的函数

module.hot.accept 函数只接受具体路径的 path 参数，也就是说我们无法通过 glob 或类似风格的方式批量注册热更新回调。

一旦某个模块没有注册对应的 module.hot.accept 函数后，HMR 运行时会执行兜底策略，通常是刷新页面，确保页面上运行的始终是最新的代码。 在 Webpack HMR 框架中，module.hot.accept 函数只能捕获当前模块对应子孙模块的更新事件

• 在 foo.js 中无法捕获 bar.js 及其子模块的变更事件
• 在 bar-1.js 中无法捕获 bar.js 的变更事件

这一特性与 DOM 事件规范中的冒泡过程极为相似，使用时如果摸不准模块的依赖关系，建议直接在应用的入口文件中编写热更新函数。