webpack-dev-server v4 配合ngrok实现热重载的正确配置方案问询

你之前仅配置webSocketURL.hostname的方案缺少两项关键配置，才会导致websocket连接失败、热重载失效，完整可用的配置如下：

// WDS v4 完整配置
devServer: {
  // 放行ngrok域名，绕过WDS默认的host访问校验
  allowedHosts: ['react-tunnel.ngrok.io'],
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
      // ngrok的https隧道对应wss协议，若使用http隧道则修改为ws
      protocol: 'wss',
      // ngrok https服务默认对外端口为443，无需填写本地WDS启动端口
      port: 443,
    },
  },
  // 其余原有devServer配置保持不变
}

各关键配置的作用说明：

• allowedHosts：WDS v4 默认开启host访问校验，仅允许本地地址访问，必须主动将ngrok域名加入放行列表，否则所有从ngrok转发的请求都会被直接拦截。如果是临时使用免费版ngrok，每次生成的域名不固定，可直接设置allowedHosts: 'all'关闭校验，适配本地开发测试场景。
• webSocketURL.protocol：需要和ngrok隧道的协议对应，https隧道用wss，http隧道用ws，不填的话WDS会默认沿用本地启动的协议配置，和ngrok协议不匹配就会导致websocket连接失败。
• webSocketURL.port：需要填写ngrok对外暴露的端口，默认https隧道为443，不要填写本地WDS的启动端口。

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