Webpack 加入 HMR 实现页面自动刷新
Webpack 是一个模块打包器，是前端工程化的常用工具之一。而 HMR（Hot Module Replacement） 是一个 Webpack 插件，能够在不刷新整个页面的情况下，让页面跟随代码的更新而自动刷新。本文将介绍如何在 Webpack 中加入 HMR，实现页面自动刷新的效果。
一、HMR 的实现原理
HMR 的实现原理是通过在客户端和服务器之间建立 websocket 连接，在监控文件变化时通过 webpack-dev-server 向客户端发送更新的代码块，客户端收到后进行局部刷新，从而达到页面自动刷新的效果。
二、安装和配置 webpack-dev-server
首先需要安装 webpack-dev-server 和 webpack-cli：
npm i webpack-dev-server webpack-cli -D
在 webpack 配置文件中，需要配置 devServer 对象：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------------ --------
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -----------------------------------
-
-
-
-
--
-------- -
--- -------------------
--------- ------------------
--
-
--其中，devServer.contentBase 指定 Web 服务器的根目录，本例中为 dist 目录。HtmlWebpackPlugin 用于在 dist 目录自动生成 index.html 文件，其模板是 src/index.html。
现在，执行 npx webpack-dev-server 命令，在浏览器中打开 http://localhost:8080 网址，即可看到自动生成的 index.html 页面。
三、加入 HMR
在配置对象中加入如下代码：
devServer: {
contentBase: './dist',
hot: true
},其中，devServer.hot 表示启用 HMR 插件。此时再次执行 npx webpack-dev-server 命令，在浏览器中打开网址，查看控制台输出，可以看到如下信息：
[HMR] Waiting for update signal from WDS...
表示 HMR 插件已启用。现在，我们需要修改 src/index.js 文件，此时在浏览器控制台中可以看到如下输出：
[HMR] Checking for updates on the server... [HMR] Downloaded update. [HMR] App is up to date.
且无需手动刷新 web 页面，即可看到页面内容已经更新，达到了自动刷新的效果。
四、使用 webpack-dev-middleware + webpack-hot-middleware
除了通过配置 devServer 实现 HMR 外，还可以通过使用 webpack-dev-middleware + webpack-hot-middleware 包，实现 HMR 的效果。
npm i webpack-dev-middleware webpack-hot-middleware express -D
配置 webpack-dev-middleware：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- -------------------- - ---------------------------------- ----- --- - ---------- ----- ------ - ------------------------------- ----- -------- - ---------------- -------------------------------------- - ----------- ------------------------ ---- ---------------------------------------- ---------------- ---------- - ---------------------- -- -------- ---
其中，webpackDevMiddleware 指定编译器和公共路径，webpackHotMiddleware 指定编译器并启用 HMR 插件。通过 node server.js 启动服务，即可在浏览器中访问网址查看 HMR 效果。
五、总结
本篇文章介绍了 Webpack 加入 HMR，实现页面自动刷新的方法。在开发中，通过 HMR 能够提高效率，避免手动刷新页面的操作。通过本文的学习，读者可以熟悉 HMR 的原理和配置方法，掌握 HMR 的常用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bcae948841e9894a15c13