升级Webpack 5后Webpack Dev Server持续报WebSocket连接失败

问题场景 #

升级到Webpack 5后，控制台一直弹出Webpack dev server connection to "ws://localhost:__/ws" failed的报错，虽然项目功能正常，但这个报错反复出现。尝试配置官方文档里的devServer.webSocketServer选项也没解决问题，配置代码如下：

const Port =  3500;
const Host = 'localhost';
const devServer = new WebpackDevServer(
  {
    hot: false,
    host: Host,
    port: Port,
    historyApiFallback: true,
    devMiddleware: {
      publicPath: `http://${Host}:${Port}/`,,
      stats: {
        colors: true,
        hash: false,
        version: false,
        chunks: false,
        children: false
      }
    }
  },{
  entry: {

    vendor: [
      'babel-polyfill',
      'jquery',
    ],
    app: [
      // 'babel-polyfill',     
      './app/startup',
      `webpack-dev-server/client?http://${Host}:${Port}`,
      'webpack/hot/only-dev-server'
    ],
  },
  devtool: 'eval-source-map';
  output : {
  filename: '[name]-bundle.js',
  path: path.join(__dirname, 'public'),
  publicPath: `http://${Host}:${Port}/`,
},
optimization: {
    splitChunks: {
      cacheGroups: {
       default: false
      }
    }
  },

}
);

报错核心原因 #

1. 旧版dev-server客户端代码与Webpack 5不兼容
   你在app入口里手动引入了webpack-dev-server/client?http://${Host}:${Port}和webpack/hot/only-dev-server，这是Webpack 4及更早版本的用法。Webpack 5的webpack-dev-server已经内置了客户端逻辑，手动引入旧代码会导致WebSocket连接逻辑重复，其中的端口占位符__无法被正确替换，最终触发连接失败报错。

2. 配置代码存在语法错误
   你的配置里有两处语法问题：

   • devMiddleware.publicPath末尾多了一个逗号：publicPath: http://${Host}:${Port}/,,
   • devtool行末尾用了分号而非逗号：devtool: 'eval-source-map';
     这些错误会导致Webpack无法完整解析配置，WebSocket相关的参数无法被正确加载。

3. 热更新配置矛盾
   你设置了hot: false，但入口里又引入了热更新相关的webpack/hot/only-dev-server，这种矛盾会让dev-server内部逻辑混乱，进而引发WebSocket连接异常。

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