简介
melpack-middleware 是一个 webpack 中间件，用于对页面进行自动刷新的功能。它可以运行在 webpack 的开发服务器上，实现即时更新开发中的页面，使开发过程更加高效便捷。
安装
npm install --save-dev melpack-middleware
使用
melpack-middleware 需要作为 webpack 的中间件来使用，可以通过下面的代码来配置：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------------- - ------------------------------ ----- -------- - --------- -- ---------- --- ----- ------- - - -- --------------------- -- ------------------ ----------------------------
其中 options 可以配置的项有：
- port: 进行自动刷新的端口号，默认为 3000；
- host: 进行自动刷新的主机名，默认为 localhost；
- match: 支持正则表达式，匹配需要自动刷新的 URL。
示例
下面是一个完整的示例，创建一个 webpack 开发服务器，同时使用 melpack-middleware 来实现自动刷新：
首先创建一个 index.html 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------------------- ------- ------ --------------------------- ---- ---------------- ------- ----------------------------- ------- -------
同时创建一个 index.js 文件：
document.getElementById('root').innerHTML = 'Hello, world!';创建一个 webpack.config.js 文件，如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------
-
-然后通过下面的代码创建 webpack 开发服务器，并自动刷新：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------------- - ------------------------------ ----- ----------------- - ------------------------------ ----- ------ - ------------------------------- ----- ------- - - -- ---------- ----- ----- -- ------- ----- ------------ -- ------------ ------ ----------------- -- ----- -------- - ---------------- ------------------ ---------------------------- ----- ------ - --- -------------------------- - ----- ----- ----- ----- --- ------------------- ------------ -- -- - --------------------- ------ -- ------------------------ ---
这时打开浏览器，访问 http://localhost:8080 即可看到页面。
接着修改 index.js 文件：
document.getElementById('root').innerHTML = 'Hello, melpack-middleware!';保存之后，浏览器页面会自动刷新，显示出新的内容。
结论
通过本文的介绍，我们学会了使用 npm 包 melpack-middleware 来实现 webpack 开发服务器的自动刷新功能，并成功创建了一个完整的示例。这对于前端开发人员来说，一定会带来更加高效便捷的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588881e8991b448d5cb5