Webpack-dev-server持续重连问题求助（Angular项目）

问题描述 #

本地运行Angular团队项目时出现异常：

• 开启Chrome/Edge浏览器开发者工具的移动端视图后，刷新页面会触发[webpack-dev-server]无限重连日志循环，导致页面加载缓慢、调试卡顿
• 关闭控制台刷新页面无异常，但因开发依赖移动端视图，无法以此方式规避
• Opera浏览器无此问题，同团队其他成员运行同一分支代码未出现该现象，且本地其他Angular项目也存在相同问题
• 已执行npm install、npm update，未解决问题
• 当前环境依赖：Webpack 5.74.0，Webpack-dev-server 4.11.0，IDE为Visual Studio和Intellij

可行解决方案 #

1. 降低Webpack-dev-server日志级别 #

修改项目根目录的angular.json，在serve配置中限制日志输出级别：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "clientLoggingLevel": "warn"
    }
  }
}

或者通过自定义Webpack配置调整：

"devServer": {
  "client": {
    "logging": "warn"
  }
}

2. 关闭客户端重连提示 #

在Webpack配置中禁用重连通知，减少日志输出：

"devServer": {
  "client": {
    "reconnect": false
  }
}

注意：此设置会关闭重连状态提示，若实际存在连接问题可能无法及时察觉，建议仅用于调试阶段。

3. 取消网络节流设置 #

移动端视图默认可能开启网络节流（如Slow 3G），导致WebSocket连接超时触发重连：

• 打开开发者工具→网络面板→节流选项→选择No throttling

4. 重置浏览器开发者工具配置 #

本地浏览器的开发者工具配置异常可能引发该问题：

• 打开开发者工具→右上角设置图标（⚙️）→拉至底部点击「Restore defaults and reload」

5. 降级Webpack-dev-server版本 #

当前使用的4.11.0版本可能存在与Chrome/Edge移动端视图的兼容bug，尝试降级至稳定版本：

npm install webpack-dev-server@4.9.0 --save-dev

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