前言
随着现代前端开发的发展，前端工程化变得越来越重要。前端技术栈也不断地更新和拓展，为此越来越多的开发人员使用 webpack 和 npm 等工具来优化和提升开发效率。本篇文章将详细介绍一个 npm 包 webpack-middleware-hmr，它可以帮我们实现一个热更新的效果，提高我们的开发效率。
webpack-middleware-hmr
webpack-middleware-hmr 是一个 webpack 的中间件，它提供了 webpack 正确使用热更新的方法，即 hot module replacement（HMR）。使用 HMR 可以显著降低开发成本，因为在页面实时刷新时，我们不需要再次编译整个项目，而是只需要重新编译更改的部分，从而大大提高了开发效率。
安装 webpack-middleware-hmr
在使用 webpack-middleware-hmr 之前，我们需要先安装它。使用以下命令进行安装：
npm install webpack-middleware-hmr
使用步骤
步骤一：配置 webpack.config.js
将 webpack-middleware-hmr 添加到 webpack.config.js 的配置文件中。例如：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
----- -------------- - -----------------------------------
----- ---- - ----------------
-------------- - -
------ -
----------------
--
------- -
---- - ----------------------- --------
----------- ----
-------- - -----------
--
------- -
------ -
-
---- - --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- --------------
---
--- -------------------
- ----- --------------- --- ---------- -
---
--- ---------------------------
--- -----------------
--- ------------------------------------ -- ------- ---
--
---------- -
---- ---- -- -- --------- - --- --- ----
-
--步骤二：配置 server.js
在此之前，先介绍一个非常有用的工具：webpack-dev-middleware，它可以帮助我们在开发环境中使用 webpack。我们需要在 server.js 中引入该工具，然后将它添加到 express 的中间件里，如下所示。
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------------- - ----------------------------------
----- -------------------- - ---------------------------------- -- -- ----------------------
----- ------ - -------------------------------
----- ------- - -------------------
----- --- - ----------
----- -------- - ----------------
----- ------------- - ------------------------------ -
----------- -------------------------
------ -
------- -----
------- -----
-
---
----- ------------- - ------------------------------- -- - ---------------------- --- ------- ---
-----------------------
----------------------- -- -- ---------------------- ---
---------------- -------- -- -
------------------- -- --------- -- ---- --------
---步骤三：在入口文件中添加 HMR 代码
在我们的应用入口文件中加入以下代码：
if (module.hot) {
module.hot.accept();
}这段代码告诉 webpack，如果有任何模块发生更改，则应该在页面上进行实时更新。
到此为止，我们已经完成了使用 webpack-middleware-hmr 的所有步骤。接下来，我们可以在浏览器中查看结果。
示例代码
下面是本文所讲述的整个示例代码：
webpack.config.js：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
----- -------------- - -----------------------------------
----- ---- - ----------------
-------------- - -
------ -
----------------
--
------- -
---- - ----------------------- --------
----------- ----
-------- - -----------
--
------- -
------ -
-
---- - --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- --------------
---
--- -------------------
- ----- --------------- --- ---------- -
---
--- ---------------------------
--- -----------------
--- ------------------------------------
--
---------- -
---- ----
-
--server.js：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------------- - ----------------------------------
----- -------------------- - ----------------------------------
----- ------ - -------------------------------
----- ------- - -------------------
----- --- - ----------
----- -------- - ----------------
----- ------------- - ------------------------------ -
----------- -------------------------
------ -
------- -----
------- -----
-
---
----- ------------- - -------------------------------
-----------------------
-----------------------
---------------- -------- -- -
------------------- -- --------- -- ---- --------
---index.js：
-- -------------------- ---- ------- -- ------------ - -------------------- - --------------------- --------- ----- ----- - -- -- - ------------------------- - --------
index.html:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------------- ----- --------------- ------- ---------------------- ------------------------------------------ ------- ------ ------- ------------------------- ------- -------
总结
在本篇文章中，我们介绍了如何在 webpack 中使用 webpack-middleware-hmr，它可以大大提高我们的开发效率。我们逐步介绍了如何安装、配置 webpack.config.js、配置 server.js，并且加入了示例代码，以便更好地理解和应用，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdda2