如何在Webpack 5上使用"webpack serve"时实现热重载

Question

我刚刚升级到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

- Sam

---

你是如何访问网站/项目的？是直接使用localhost:port还是使用了nginx或其他工具？ - rupindr

本地端口。不涉及nginx。 - Sam

你能否检查一下你的浏览器开发者工具 -> 网络选项卡，看看是否有 webpack 热重载调用吗？ - rupindr

Answer 1

可能的解决方案有， 如果您不是在运行Node.js 只需在webpack配置文件的devServer选项中添加hot：true即可。 如果您正在运行Node.js 在服务器文件中创建webpackDevServer实例时，必须传递第二个options参数，其中包含键值对hot: true。

由于Webpack 5的出现，配置变得有点棘手。在我看到您的开发配置/ package.json之前，我会假设您具有正确的依赖项/选项。 回答您的问题时，很难知道要考虑什么，因为您没有提供有关环境等其他信息的明确输入。 参考资料 文档/概念： https://webpack.js.org/api/hot-module-replacement/ 全面指南： https://webpack.js.org/guides/hot-module-replacement/

- Dan der Mensch

---

你如何传递键值对？你如何知道是否在运行nodejs？Nodejs在本地主机上提供网站服务，但我对你的意思感到困惑。当您没有使用nodejs时会出现什么情况？ - Sam

我不认为我是从脚本启动它的，我相信npm start只会触发命令“webpack serve”。很抱歉我不能分享所有的代码，但如果你告诉我需要哪些部分，我可以分享。 - Sam

当然，你能分享一下你的webpack.devServer字段吗？ - Dan der Mensch

devServer: { open: true, historyApiFallback: true }, - Sam

在此处添加 hot: true, ，然后您应该会在控制台中看到以下消息： [WDS] Hot Module Replacement enabled. 和 [HMR] Waiting for update signal from WDS. 当您对代码库进行更改（不包括配置文件）时，您将会看到类似 [WDS] App hot update... 的内容。 - Dan der Mensch