webpack-dev-server 启用功能，然后在 Webpack 配置中使用“host”选项时断开两次连接

Question

将 webpack-dev-server 从 3.11.0 更新到 4.4.0 后，当我在 Webpack 配置文件中的 devServer 下使用“host”选项时，热重载不再起作用。我的控制台显示 WDS 连接两次，然后断开连接：

[HMR] Waiting for update signal from WDS...
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled. 
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect... 
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled.
[webpack-dev-server] Disconnected!

当我删除“主机”选项并恢复为“本地主机”时，热重载始终有效。

我的 webpack 配置文件的 devServer 部分：

devServer: {
  port: 3000,
  host: 'app.ddev.site',
  allowedHosts: 'auto',
  open: true,
  hot: true,
  proxy: {
    '/xhr': 'http://localhost:7777',
  },
},

Webpack 包版本：

"webpack": "^5.61.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"

与“npm run dev”相关的脚本：

"client": "cross-env NODE_ENV=development webpack serve --config=config/webpack.dev.js",
"dev": "concurrently \"npm run start-local\" \"npm run client\"",
"start-local": "nodemon src/server/start.js",

如有任何帮助，我们将不胜感激！预先感谢。

Answer 1

我认为你的

allowedHosts

设置可能是罪魁祸首。

根据文档，您可能会成功：

allowedHosts: ['all']

Answer 2

您可以使用 https 运行您的 webpack 服务器。

对我来说，这是因为防病毒软件。修复此问题的另一种方法是将您的本地主机添加到防病毒例外中。

希望有帮助！