Webpack 是前端开发中非常常用的构建工具，它能够将多个文件打包成一个或多个文件，让前端项目打包输出更加高效并且易于维护。而在开发过程中，由于浏览器中的页面和 JavaScript 是单向的，每一次代码更新都需要重新构建整个项目，这个过程非常浪费时间。因此，Webpack 最新的版本引入了 HMR 技术，能够在不刷新浏览器的前提下，使部分代码的更新立即生效。本文将详细介绍 Webpack 模块热替换（HMR）的原理和使用方法。
HMR 原理
HMR 技术的原理是在浏览器和服务器之间建立一个 WebSocket 长连接，当代码发生变化时，服务器会将新的代码通过这个连接传送到浏览器端，浏览器端会将新的代码替换掉旧的代码，同时保留评估状态等变量信息。
在 Webpack4 之前，HMR 技术只能通过 webpack-dev-server 配合 webpack 实现，而在 Webpack4 之后，由于 webpack-dev-server 实现的 HMR 已经固化成独立模块 webpack-hot-middleware，因此，HMR 能够像其他插件一样，直接通过配置文件引入，无需引入 webpack-dev-server。
HMR 使用方法
下面是一个使用 HMR 技术的简单示例，需要通过 webpack.config.js 配置文件实现：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
--- -------------------
------ ------
--------- ---------------------
---
--- ------------------------------------
--
---------- -
------------ ---------
---- ----
-
--需要使用到热替换的部分是 devServer 对象，形如 {hot: true}，同时在 plugins 中添加 new webpack.HotModuleReplacementPlugin() 插件，以此来开启 HMR 功能。
最后在 js 文件中添加如下代码：
if (module.hot) {
module.hot.accept('./src/index.js', function() {
console.log('Accepting the updated index.js module!');
})
}这段代码的含义是当 index.js 代码发生变化时，输出 Accepting the updated index.js module!，从而证明代码已经生效。
总结
通过以上的介绍，我们了解了 HMR 技术的原理和使用方法，HMR 技术的引入可以让我们在开发过程中减少构建时间，从而提高前端开发效率。当然，还有其他的优化手段，比如代码分割、tree-shaking、懒加载等等，我们也会在后续的文章中进行讲解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654613cf7d4982a6ebfdbdc4