Angular项目中webpack-dev-server在Chrome下出现连接循环问题

云上老周

2026-8-17

Angular 14 + webpack-dev-server 4.9.3 Chrome控制台循环重连问题解决办法

你的Angular 14项目搭配webpack-dev-server 4.9.3时，Chrome控制台持续循环显示「已断开连接！，正在尝试重新连接...，实时重载已启用」的消息，但Edge正常，可尝试以下方案解决：

检查Chrome不安全内容权限
打开Chrome设置，进入「隐私和安全性>网站设置>权限>不安全内容」，将你的本地开发地址（如http://localhost:4200）添加到允许列表。这是因为Chrome默认会拦截非HTTPS环境下的部分websocket请求，而webpack-dev-server的热重载依赖websocket通信。
调整webpack-dev-server配置
在angular.json的architect>serve>options中添加或修改webpack-dev-server相关配置：
```
"webpackConfig": {
  "devServer": {
    "client": {
      "webSocketURL": "auto://0.0.0.0:0/ws"
    },
    "allowedHosts": "all",
    "hot": true
  }
}
```
强制指定websocket连接地址，同时允许所有主机访问，避免跨域拦截导致的连接失败。
禁用Chrome扩展插件
广告拦截、隐私保护类插件（如AdBlock、Privacy Badger）会拦截websocket连接，导致热重载循环断开。可以先开启Chrome隐身模式测试，若隐身模式下正常，再逐个禁用插件排查问题来源。
清除Chrome本地缓存和站点数据
打开Chrome开发者工具，切换到「应用>存储」，点击「清除站点数据」，选中本地开发地址相关数据后确认清除，再重启项目。缓存的旧资源或连接信息可能导致通信异常。
升级webpack-dev-server版本
4.9.3版本存在已知的Chrome兼容性bug，尝试升级到同分支的较新版本：
```
npm update webpack-dev-server --save-dev
```