Webpack 是一个用于打包前端资源的工具，它可以将多个 JavaScript 文件、CSS 文件、图片等打包成一个或多个文件以便于加载。除此之外，Webpack 还提供了许多插件与 loader 可以扩展其功能。其中最重要的两个插件之一是 webpack-dev-middleware 和 webpack-hot-middleware，它们可以使 Webpack 开发体验更加的流畅和快速。
什么是 webpack-dev-middleware 和 webpack-hot-middleware？
webpack-dev-middleware 是一个让 webpack 打包后的文件缓存在内存中，以此可控制 webpack 输出文件的插件。这个插件将 webpack 和浏览器连接起来，使得在开发期间可以实时更新最新的代码，也可以在没有实时刷新的情况下使用 HMR。
webpack-hot-middleware 则是用于在浏览器中实现热加载（HMR）的插件。它将和 webpack-dev-middleware 配合使用，通过 Websocket（或者其他的实时通信方式）向客户端推送新的模块更新。
这两个插件使得我们在开发过程中可以在不刷新页面的情况下实现代码更新，从而提高了开发效率。
如何使用？
下面我们来看一下如何使用这两个插件。
首先，我们需要安装这两个插件：
npm i -D webpack-dev-middleware webpack-hot-middleware
然后，在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- ---- - ----------------
----- ------- - -------------------
----- -------------------- - ----------------------------------
----- -------------------- - ----------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
----------- ----
--
-------- --------------------
---------- -
------------ ---------
---- -----
--
-------- -
--- ---------------------
--- -------------------
------ -------- -----
--------- ---------------
---
--- -------------------------------------
--
------- -
------ -
- ----- --------- ---- ------------ --
-
----- ---------
---- ---------------- --------------
--
-
----- -----------------------
---- ----------------
--
-
----- ----------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- --------------------------------------------
--
--
--
--
--
--
-- --------------------- --- -------------- -
----- --- - ----------
----- -------- - ----------------------------------------
--------
------------------------------ -
----------- ----
--
--
--------
------------------------------ -
---- ------------
----- -----------------
---------- ----
--
--
------------ --------------------------
---------------- -- -- -
------------------- ------- -- ---- -------
---
-
---- -
----------------------- --------
-其中，webpack-dev-middleware 需要加到 express 应用中。这里通过环境变量区分开发和生产环境，如果在开发环境下，则监听端口并启动 express 服务。
运行 npm run start 即可启动本地服务。
HMR 实现
在使用了 webpack-dev-middleware 和 webpack-hot-middleware 后，我们可以使用 webpack 的 HMR 功能。
首先，在入口文件中加入下面的代码以启用 HMR：
if (module.hot) {
module.hot.accept('./App.js', function() {
document.body.removeChild(div);
renderApp();
});
}这里的 ./App.js 是需要 HMR 的模块路径，这里我们假设我们进行了一些修改，需要更新这个模块。
总结
webpack-dev-middleware 和 webpack-hot-middleware 是非常重要的两个插件，它们可以帮助我们更快更好地开发 Webpack 项目。它们的使用方法较为简单，只要按照本教程进行设置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66570a34d3423812e4c278c9