React+Webpack项目WDS断开连接问题求助（附配置代码）

结合你的React+Webpack配置和Nginx代理场景，我整理了几个关键的修复步骤，帮你解决连接断开的问题：

1. 修正WDS客户端入口的错误配置 #

你当前的entry里写了https://127.0.0.0:3001，这里的IP地址是错误的（应该是127.0.0.1），而且手动在entry中添加WDS客户端入口已经是比较旧的做法了——现在webpack-dev-server的inline模式会自动注入这些代码，手动配置反而容易出错。

建议直接简化你的entry配置：

entry: {
  App: './src/index.js'
},

2. 调整devServer配置，适配反向代理 #

当使用Nginx反向代理时，WDS需要明确知道对外的访问地址，否则WebSocket连接会因为地址不匹配而断开。请在devServer中添加hot和public配置：

devServer: {
  inline: true,
  port: 3001,
  historyApiFallback: true,
  contentBase: __dirname + '/public/',
  disableHostCheck: true,
  hot: true, // 明确开启热重载，和命令行的--hot兼容
  public: 'your-domain.com' // 替换成Nginx对外提供服务的域名/端口
}

public参数会让WDS生成正确的WebSocket连接地址，确保和Nginx代理的地址一致。

3. 配置Nginx支持WebSocket转发 #

WDS的热重载依赖WebSocket通信，默认的Nginx代理配置不会处理WebSocket的升级请求，这是导致连接断开的常见原因。请在你的Nginx location配置中添加以下内容：

location / {
  proxy_pass http://127.0.0.1:3001;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
}

这些配置会让Nginx正确转发WebSocket请求，维持WDS的持久连接。

4. 检查HTTPS配置的一致性 #

如果你的Nginx对外提供HTTPS服务，但WDS本身使用HTTP（这是常见的配置），请确保：

• 不要在WDS的entry或配置中强制指定HTTPS地址，而是让WDS使用HTTP，通过Nginx的HTTPS对外暴露
• 如果必须在WDS中使用HTTPS，需要在devServer中添加https: true配置，并确保证书相关文件正确设置

完成以上调整后，重启WDS和Nginx，应该就能解决WDS频繁断开的问题了。

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