随着前端项目日益复杂，webpack 作为现代前端构建工具的代表，已经成为了绝大多数前端项目的首选。其中，热更新（Hot Module Replacement, HMR）作为 webpack 提供的重要特性之一，在开发过程中十分方便和高效。但是，使用 HMR 时还是有一些小坑需要注意，本文将为大家详细介绍这些小坑。
热更新的原理
HMR 是指在应用程序运行过程中，webpack 可以在不刷新整个页面的情况下，替换应用程序中的一部分。它通过监视应用程序的各个模块，当其中的一个模块发生改变时，只会重新编译这个模块，然后通过一个 WebSocket 与浏览器通信，将新编译的代码发送给浏览器，从而实现页面的实时更新。
小坑1：HMR 和代码分离的冲突
HMR 适用于调试和开发，但是它和代码分离（Code Splitting）的功能存在一定冲突。代码分离可以将应用程序中的代码分成多个块，从而使得页面加载更快，但是这些块在热更新的时候可能不会被更新。为了解决这个问题，我们需要使用 webpack 的 require.ensure() API，它可以确保代码块被正确地更新。
// 引入 code splitting 的代码块
require.ensure([], function(require) {
var module = require('./module');
// ...
});小坑2：HMR 和样式表的冲突
在使用 HMR 时，样式表的更新也需要特别注意，一般来说我们可以使用 style-loader 和 css-loader 来加载样式表，但是这样做会导致样式表的重复添加。因此，我们需要使用 extract-text-webpack-plugin 插件来将样式表抽离出来，并在生产环境中使用，以避免重复添加。
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- --------------
--
-
-
--
-------- -
--- -------------------------------
-小坑3：HMR 和异步加载的模块的冲突
在使用 HMR 时，异步加载（Dynamic Import）的模块也需要特别注意，因为这些模块不会被立即加载。为了让异步加载的模块也能够正确地热更新，我们需要使用 import() 方法来加载它们。
// 异步加载的模块
import('./module').then(function(module) {
// ...
});小结
通过以上几个例子，我们可以看到，在使用 HMR 过程中，需要注意代码分离、样式表和异步加载的模块这三个方面。如果这些小坑有所遗漏，就有可能导致页面的热更新出现问题。希望本文可以为大家在使用 HMR 时提供一些参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67821993935627c900f73076
