Webpack 是一个常用的前端打包工具，但是每次修改代码都需要重新打包成一个新的文件，然后在浏览器中刷新页面才能看到修改的效果，这样效率非常低。为了解决这个问题，可以使用 webpack-dev-middleware 来实现热更新，它能够实现像 webpack-dev-server 一样的热更新效果，但是更加灵活，可以配合自定义的服务器使用。
webpack-dev-middleware 是什么？
webpack-dev-middleware 是一个 webpack 中间件，可以将 webpack 的编译过程放到内存中，然后通过 HTTP 服务器将编译结果输出到浏览器中，这样就可以在浏览器中实现代码修改后即时更新的效果。
如何使用 webpack-dev-middleware？
安装 webpack-dev-middleware
首先需要在项目中安装 webpack-dev-middleware，可以使用 npm 命令进行安装：
npm install --save-dev webpack-dev-middleware
配置 webpack.config.js
在 webpack.config.js 中配置与 webpack-dev-middleware 相关的内容，具体可以参考下面的示例：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
----- --------------
-------- -------------
-------- -
--- ------------------------------------
-
-配置中需要开启热更新，可以通过 webpack.HotModuleReplacementPlugin 来实现。另外，一定要将 mode 设为 development，这样才会开启热更新模式。
配置 express
要使用 webpack-dev-middleware，需要先创建一个 express 服务器，然后将 webpack-dev-middleware 配置到服务器中。具体可以参考下面的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- --- - ---------- ----- ------ - ------------------------------- ----- -------- - ---------------- -------------------------------------- - ----------- ------------------------ ---- ---------------- -------- -- - ---------------------- -- ---- -------- ---
在这个示例中，首先创建了一个 express 服务器，并将 webpack 的配置传递给 webpack 方法，然后通过 webpackDevMiddleware 将编译结果输出到浏览器中，其中 publicPath 用于指定服务器输出的目录。
配置 package.json
将上面的代码保存为 app.js，然后在 package.json 中配置启动命令：
"scripts": {
"start": "node app.js"
}运行服务器
运行服务器，然后在浏览器中访问 http://localhost:3000，修改代码后就能实现热更新的效果了。
总结
通过使用 webpack-dev-middleware，可以非常方便地实现代码热更新的效果，这样能够大大提高开发效率。但是在实际开发中，也需要注意一些问题，比如需要配置合适的合并方式、需要处理一些特殊情况等等。希望本文能够给大家带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461cdea968c7c53b032659d