Webpack 5跨端口热重载异常：请求指向错误端口求助

核心问题是热重载的WebSocket请求默认使用当前页面的域名（localhost:8000），而非webpack-dev-server所在的localhost:3000端口。你之前的代理配置没起作用，是因为代理是devServer处理请求转发的逻辑，但客户端根本没把热更新请求发向devServer。

直接给你关键修改方案：

1. 强制指定WebSocket请求地址 #

在devServer.client配置中添加webSocketURL，明确告知热重载客户端要连接到devServer的端口：

client: {
  logging: 'warn',
  overlay: {
    errors: false,
    warnings: false,
    runtimeErrors: true,
  },
  // 新增：指定WebSocket的目标地址
  webSocketURL: 'ws://localhost:3000/ws'
},

2. 匹配静态资源的publicPath（推荐） #

在webpack根配置中调整output.publicPath，确保资源请求路径和devServer的端口一致：

output: {
  ...,
  publicPath: 'http://localhost:3000/build/'
}

3. 清理冗余代理配置 #

你之前的代理配置是将/build请求反向转发到3000，和当前问题场景不符，直接删除即可：

// 删除这段无用配置
proxy: [
  {
    context: ['/build'],
    target: 'http://localhost:3000',
  },
],

修改后的完整devServer配置示例 #

{
  ...,
  devServer: {
    allowedHosts: 'all',
    static: {
      directory: path.join(__dirname, 'build'),
      watch: true,
    },
    port: process.env.LOCAL_PORT, // 确认此环境变量值为3000
    host: process.env.LOCAL_HOST,
    compress: true,
    client: {
      logging: 'warn',
      overlay: {
        errors: false,
        warnings: false,
        runtimeErrors: true,
      },
      webSocketURL: 'ws://localhost:3000/ws'
    },
    hot: 'only',
    liveReload: false,
    watchFiles: ['src/**/*'],
  },
}

注意：如果你的LOCAL_PORT环境变量不是3000，要同步修改webSocketURL中的端口号。

这样配置后，热重载的WebSocket请求会直接指向localhost:3000，模块热替换就能正常工作，无需依赖liveReload拖慢开发速度。

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