webpack-hot-server 是一个可以自动重新启动 Express 服务器的 webpack 插件，本教程将详细介绍如何使用该插件。
简介
有时候我们在进行前端开发时，需要编写一个 Express 服务器提供 API 或者 SSR 功能。当我们修改了服务器端代码时，需要手动重新启动服务器才能看到效果。
这时候，webpack-hot-server 就可以派上用场了。webpack-hot-server 是一个可以自动重启 Express 服务器的 webpack 插件，可以确保服务端代码的变更能够及时被更新。
安装
首先需要安装 webpack-hot-server，使用 npm 可以很方便地进行安装：
npm install webpack-hot-server --save-dev
webpack-hot-server 插件依赖于 webpack-dev-middleware，如果还没有安装这个插件，需要同时进行安装：
npm install webpack-dev-middleware --save-dev
配置
在 webpack 配置中加入 webpack-hot-server，具体的配置如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------------------- - -----------------------------------------
----- ------------- - -------------------------------
-------------------------- - ------------------------- -------------------------
------------------- - -----
------------------------------ --------------------------------------
-------------- - -
------- -------
------ --------------------
------- ---------------------
------- ---------------------
-------- ----------------------
------ -----
-------- -
--- ----------------------------
---------------------- -
----------- ----------------
----------- ----
--
---
--
--在以上配置中，我们做了以下事情：
- 将服务器端渲染代码的入口文件改为了
['webpack/hot/poll?1000', './src/server/index.js']，其中'webpack/hot/poll?1000'是 webpack 的 HMR 入口点，1000是自动刷新的延迟时间（ms）。这个配置可以确保服务器端代码修改时能够及时更新。 - 启用 watch 模式，确保源代码有修改时能够及时编译。
- 加入了
webpack.HotModuleReplacementPlugin()插件，用于启用 HMR 功能。 - 加入了
WebpackHotServerMiddleware插件，用于自动重启 Express 服务器。
使用
安装完插件并添加配置后，我们来试试这个插件是否可用。
首先，在你的服务器端代码中增加一个输出当前时间的 API：
app.get('/api/gettime', (req, res) => {
const now = new Date().toISOString();
res.send(now);
});接下来，在浏览器中访问 /api/gettime 接口，应该能看到当前的时间。
然后，修改一下服务器端代码，例如输出时间格式：
app.get('/api/gettime', (req, res) => {
const now = new Date();
res.send(now.toLocaleString());
});修改完成后，保存文件，然后观察终端，可以看到 webpack 已经自动重新编译并重启了服务器。
最后，再次在浏览器中访问 /api/gettime 接口，应该能看到更新后的时间格式。
总结
通过使用 webpack-hot-server 插件，我们可以轻松地实现服务器端代码的自动重启，提高开发效率。如果你正在进行前端开发，并且需要提供服务器端渲染或 API，不妨试试这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdcf8