简介
在前端开发中，Webpack 是一个十分常用的打包工具。然而，更多情况下我们可能需要将 Webpack 与服务器进行集成，来实现一些特定需求。webpack-middleware 就是一款基于 Webpack 与 Node.js 的集成中间件，可以用于在服务器端处理 Webpack 打包的资源以及实现自动构建等功能。
安装
在使用 webpack-middleware 之前，需要先安装相关的包：
npm install --save-dev webpack webpack-dev-middleware webpack-hot-middleware webpack-merge webpack-cli express
使用命令行安装即可。
使用
首先，我们需要创建一个基础 Webpack 配置文件 webpack.config.js，用于配置 Webpack 的各种参数，并将其作为参数传递给 webpack-middleware：
-- -------------------- ---- -------
-- -----------------
--- ---- - ----------------
--- ------- - -------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------
--
----- --------------
-------- -
--- -------------------------------------
--
--随后，在服务器文件 app.js 中我们需要引入 webpack-dev-middleware 和 webpack-hot-middleware 两个库，并将其与 Express 进行结合：
-- -------------------- ---- ------- -- ------ --- ------- - ------------------- --- ------- - ------------------- --- ----------------- - ---------------------------------- --- -------------------- - ---------------------------------- --- ------------- - ------------------------------- --- --- - ---------- --- -------- - ----------------------- -- -- ---------------------- --- ----------------------------------- - ----------- -------------------------------- ---- -- -- ---------------------- --- ---------------------------------------- -- ----- --- ------ - ---------------- -------- -- - --- ---- - ---------------------- ---------------- --------- -- --------------------- ------ ---
其中，通过 webpackMiddleware 函数用于处理 Webpack 打包完成的文件，并且会将处理过的文件存储在内存中，从而加快资源访问速度。而通过 webpackHotMiddleware 可以为我们提供实时更新页面的功能，让我们能更加方便的调试和开发。
最后，我们需要在 index.html 文件中引入打包后的文件：
<script src="/dist/bundle.js"></script>
至此，webpack-middleware 的使用已经完成。
总结
通过本篇文章，我们了解了如何使用 webpack-middleware 实现自动构建和服务器的集成。同时，我们掌握了 webpack-dev-middleware 和 webpack-hot-middleware 的常用配置和使用方法。这对于前端工程师来说是十分有指导意义的，也将有助于我们更加高效地开发出优秀的 Web 应用程序。
示例代码
- webpack.config.js
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - -------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------
--
----- --------------
-------- -
--- -------------------------------------
--
--- app.js
-- -------------------- ---- ------- --- ------- - ------------------- --- ------- - ------------------- --- ----------------- - ---------------------------------- --- -------------------- - ---------------------------------- --- ------------- - ------------------------------- --- --- - ---------- --- -------- - ----------------------- ----------------------------------- - ----------- -------------------------------- ---- ---------------------------------------- --- ------ - ---------------- -------- -- - --- ---- - ---------------------- ---------------- --------- -- --------------------- ------ ---
- index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ---------- ------------ ------- ------ ---- --------------- ------- ------------------------------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80007