在 Webpack 5 上使用“webpack serve”时如何进行热重载答案

【问题标题】：How to have hot reload when using "webpack serve" on Webpack 5在 Webpack 5 上使用“webpack serve”时如何进行热重载
【发布时间】：2021-03-22 09:23:03
【问题描述】：

我刚刚升级到 Webpack 5，因为 webpack-dev-server 不再工作，我将我的 npm start 命令从 webpack-dev-server 更改为 webpack serve。

这是我的npm start 命令

webpack serve --config  ./build-config/webpack.config.js

我可以看到控制台更新，打印输出，但是浏览器中的页面不会更新，我必须刷新浏览器页面。

额外

将--mode development --env development --hot 添加到我的npm start 并不能解决问题

webpack 版本：

"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"

注意：我不是在谈论 webpack-serve

【问题讨论】：

您是如何访问网站/项目的？是直接 localhost:port 还是你用的是 nginx 什么的？
本地端口。没有 nginx
你能检查一下浏览器开发者工具 -> 网络选项卡，看看是否有 webpack 热重载调用

标签： npm webpack hot-reload

【解决方案1】：

可能的解决方案是，

如果你不使用 Node.js 就像在 webpack 配置的 devServer 选项中附加 hot: true 一样简单。

如果您正在使用 Node.js 在服务器文件中创建 webpackDevServer 实例时，您必须传递第二个 options 参数，其中包含键值对 hot: true

自从 Webpack 5 出现以来，配置变得有点棘手。在我看到你的 dev config/package.json 之前，我会假设你有正确的依赖项/选项。由于您没有提供关于您的环境的明确输入，因此在回答您的问题时要考虑什么有点困难。

参考文献

对于文档/概念： https://webpack.js.org/api/hot-module-replacement/

如需综合指南： https://webpack.js.org/guides/hot-module-replacement/

【讨论】：

如何传递该键值对？你怎么知道你是否正在运行 nodejs？ Nodejs 在本地主机上为网站提供服务，但我对你的意思感到困惑。不运行 nodejs 会是什么情况？
基本上，您是通过运行脚本（例如：node fileName.js）来启动本地主机，还是使用 CLI 运行 webpack 命令？如果您对问题的第一部分回答“是”，那么您正在运行 Node。这就是为什么查看您的代码有助于清除所有问题的原因。
我不认为我是从脚本启动它，我相信 npm start 只是触发命令“webpack serve”。抱歉，我不能分享我所有的代码，但如果你命名它们，我可以分享某些部分
好的，你能分享你的 webpack.devServer 字段吗？
在其中添加hot: true,，您应该会在控制台[WDS] Hot Module Replacement enabled. 和[HMR] Waiting for update signal from WDS 中看到以下消息。当您更改代码库（不包括配置文件）时，您会看到类似[WDS] App hot update...