webpack-dev-server 4.4.0配置host后两次断开导致热重载失效求助

问题根因 #

webpack-dev-server 4.x版本对客户端WebSocket连接地址的默认推导逻辑存在限制，当你自定义host参数时，默认推导的WS连接地址和实际服务监听的地址不匹配，就会出现反复连接后断开的问题，这是4.x版本相比3.x的常见不兼容变更。

解决方案 #

在devServer配置中显式指定客户端WebSocket连接地址即可，修改后的配置如下：

devServer: {
  port: 3000,
  host: 'app.ddev.site',
  allowedHosts: 'auto',
  open: true,
  hot: true,
  // 新增以下client配置
  client: {
    webSocketURL: 'ws://app.ddev.site:3000/ws',
  },
  proxy: {
    '/xhr': 'http://localhost:7777',
  },
},

如果你的服务启用了HTTPS，需要将webSocketURL的协议头改为wss://。

可选优化 #

如果你需要同时支持本地app.ddev.site域名访问和局域网内其他设备访问，可以将host改为0.0.0.0，webSocketURL保持为你实际访问的域名地址即可。

修改完成后重启开发服务即可解决热重载断开的问题。

内容的提问来源于stack exchange，提问作者ZachSelindh