Express结合webpack中间件搭建React开发环境遇sockjs-node连接拒绝问题求助

当前报错的核心是独立webpack-dev-server（WDS）的专属路由（/sockjs-node）与自定义Express+中间件的架构不兼容。你在webpack配置里混入了大量仅适用于独立启动WDS的配置，导致热更客户端默认去找WDS才会提供的sockjs-node/info接口，但你实际启动的是自己编写的Express服务，根本没有这个路由的处理逻辑，自然会触发连接拒绝、WDS Disconnected的提示。

1. 删除无效的devServer配置块 #

webpack.config.js中的devServer节点是给通过webpack serve命令启动的独立WDS服务用的，接入中间件的自定义Express架构下这整块配置完全不生效，直接删除即可：

// 移除整段无效配置
devServer: {
  socket: 'socket',
  hot: true,
  overlay: true,
  port: 3999,
  inline: true,
  stats: 'normal',
  historyApiFallback: true,
},

2. 修正entry的热更客户端配置 #

当前entry中引入的webpack-dev-server/client是WDS专属的客户端，会自动请求WDS的sockjs路由，需要替换为webpack-hot-middleware对应的客户端：

// 修正后的entry配置
entry: [
  // 替换原有的WDS客户端为hot-middleware客户端
  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true',
  'webpack/hot/only-dev-server',
  './src/index.js',
],

替换后客户端会自动匹配Express上挂载的热中间件路由，不会再发起对不存在的sockjs-node接口的请求。

3. 补全中间件的必填配置 #

当前两个中间件都没有传入自定义配置，会导致路由匹配、单页回退、热更心跳检测异常，按下面的参数修正：

// webpack-dev-middleware 配置
app.use(wpDevMiddleware(compiler, {
  publicPath: wpConf.output.publicPath,
  stats: 'minimal',
  historyApiFallback: true, // 替代原WDS的单页路由回退能力
}))

// webpack-hot-middleware 配置
app.use(hotMiddleware(compiler, {
  path: '/__webpack_hmr',
  heartbeat: 10 * 1000,
}))

4. 排查端口不匹配问题 #

• 移除之前硬编码在热客户端地址里的3999端口，不要强制指定服务地址，让热更通道自动匹配当前页面访问的源
• 确认process.env.PORT配置的端口和你浏览器实际访问的端口一致，避免跨端口连接被拒

5. 临时移除适配WDS的冗余插件 #

ErrorOverlayPlugin是适配独立WDS服务的报错弹窗插件，在中间件场景下可能干扰热更通道建立，先将它从plugins数组中移除，验证热更是否能正常连通。

修复完成后启动服务，观察网络请求：

• 正常的热更通道请求应该指向/__webpack_hmr，不再出现sockjs-node/info的连接失败报错
• 控制台不再提示WDS Disconnected
• 修改src目录下的业务代码，页面可实现无刷新热更新

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