前言
现如今，前端开发无可避免需要使用 webpack 构建工程、管理模块和打包代码。随着前端技术的发展，我们还需要面对代码的热更新、模块热替换等开发痛点。这时，webpack-dev-hot-middleware 包就成为了它们的解决方案。
Webpack Dev Middleware 是一个容器，它可以监听文件变化、更新内存中的打包文件、发送到浏览器客户端并刷新页面。它依赖于 webpack 的编译器（webpack.compiler）并使用 webpack-dev-middleware 的 API 去完成这些任务。
webpack-dev-hot-middleware 包则在 webpack-dev-middleware 的基础上，提供了模块热替换的功能。它通过事件流来更新模块，因此只需要将需要热替换的模块标记为一个 HMR 数组来启用该功能。
本文将详细介绍 npm 包 webpack-dev-hot-middleware 的使用方法，以及如何通过代码来实现热更新和模块热替换。
安装
我们需要先安装 webpack-dev-middleware 和 webpack-hot-middleware 包，然后再通过 npm 安装 webpack-dev-hot-middleware 包：
npm i --save-dev webpack-dev-middleware webpack-hot-middleware webpack-dev-hot-middleware
基本配置
下面是 webpack-dev-hot-middleware 的基本配置。
webpack 配置
首先需要修改 webpack 的配置文件，使其支持热替换：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-------- --------------------
------ -
--------------------------------------------
----------------
--
------- -
--------- ------------
----- ----------------------- --------
----------- ----
--
----- --------------
-------- -
--- -------------------------------------
--
--主要为 entry 和 plugins 添加配置。entry 中在末尾添加了 webpack-hot-middleware，plugins 中添加了 webpack 的热替换插件。
Express 服务配置
我们基于 Express 服务和 webpack-dev-middleware 来建立开发环境，配置如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- -------------------- - ---------------------------------- ----- ----------------------- - -------------------------------------- ----- ------ - ------------------------------- ----- -------- - ---------------- ----- --- - ---------- -------------------------------------- - ----------- ------------------------- ---- ---------------------------------------- ----------------------------------------- - ---- ------------ ----- ----------------- ---------- -- - ----- ----
注意在使用 webpack-dev-hot-middleware 时，必须添加参数 path 和 heartbeat，heartbeat 为 webpack-dev-middleware 监听热更新事件的心跳时间，单位为毫秒。默认值为 10 秒。
页面配置
最后，在页面中添加热替换的代码：
if (module.hot) {
module.hot.accept('./index.js', () => {
console.log('Accepting the updated module!');
update();
});
}当程序的入口模块（入口模块中引入的模块也会计入）或者入口模块引入的模块包含热替换标记时，webpack-dev-hot-middleware 将监视这些模块的变更，并通知相关代码实现热替换。
至此，我们已经可以将代码热更新和模块热替换的功能集成在我们的开发当中。但是，一个优秀的开源包不仅仅是提供解决方案，还需要提供良好的文档和示例来帮助使用者快速掌握。
示例
下面，让我们看一下 webpack-dev-hot-middleware 包提供的示例，来更好地学习这个包的使用方法。
示例 1：基本配置
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- -------------------- - ---------------------------------- ----- ----------------------- - -------------------------------------- ----- ------ - ------------------------------- ----- -------- - ---------------- ----- --- - ---------- -- ---- - -------------------------------------- - ----------- ------------------------- ---- -- ---- - ---------------------------------------- -- ---- - ----------------------------------------- - ---- ------------ ----- ----------------- ---------- -- - ----- ---- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
这是一个最基础的配置，只需要修改 webpack 配置文件、使用 webpack-dev-middleware、webpack-hot-middleware 和 webpack-dev-hot-middleware 即可启用热更新和模块热替换功能。
示例 2：多个 compiler
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- -------------------- - ---------------------------------- ----- ----------------------- - -------------------------------------- ----- ------- - --------------------------------- ----- ------- - --------------------------------- ----- --------- - ----------------- ----- --------- - ----------------- ----- --- - ---------- -- ---- - - ---- - --------------------------------------- - ----------- -------------------------- ---- ----------------------------------------- --------------------------------------- - ----------- -------------------------- ---- ----------------------------------------- -- ---- - ------------------------------------------ - ---- ------------ ----- ----------------- ---------- -- - ----- ---- ------------------------------------------ - ---- ------------ ----- ------------------- ---------- -- - ----- ---- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
可以看到，我们只需要在服务启动时，设置多个 compiler 即可实现多个文件的热更新和模块热替换。
示例 3：与 Express WebSocket 整合
我们也可以将 webpack-dev-hot-middleware 配置为服务器 WebSocket 的前后端桥接，这样就可以实现不刷新浏览器的实时更新。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------- - -------------------
----- -------------------- - ----------------------------------
----- -------------------- - ----------------------------------
----- ----------------------- - --------------------------------------
----- ------ - -------------------------------
----- -------- - ----------------
----- --- - ----------
----- ------ - ----------------------------
----- -- - -----------------------------
-- ---- - - ---- -
-------------------------------------- -
----------- -------------------------
----
----------------------------------------
-- ---- -
----------------------------------------- -
---- ------------
----- -----------------
---------- -- - -----
----
------------------- ------ -- -
------------------------------- -
---- ------------
---------- -- - -----
---
---
------------------- -- -- -
-------------------- --- --------- -- ---- --------
---最后在前端代码中添加如下代码并启动，即可以实现 WebSocket 的热更新：
const socket = io.connect('http://localhost:3000');
socket.on('webpackHotUpdate', () => {
console.log('webpack hot update');
});总结
本文主要介绍了 npm 包 webpack-dev-hot-middleware 的使用方法。通过本文的阅读，您应该可以掌握如何通过简单的配置来使用该包，并且学会了如何用简单的使用示例更快地上手。希望本文对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567ef81e8991b448e416b