javascript - 带有 ngrok 的 webpack-dev-server 4

Question

在旧版本的 webpack-dev-server(即 3 及以下)中，我们可以简单地使用 ngrok 公开 webpack 和 webpack-dev-server 的 websock通过设置 devServer.public 的值创建隧道， 如下所示:

// WDS v3
devServer: {
  public: 'react-tunnel.ngrok.io',
  // other webpack devServer config
}

这对于在 React 等框架中开发应用程序特别有用，因为我们可以创建从本地机器到公共(public) URL 的安全隧道，以便轻松测试 Web 应用程序。
但是，在最新版本的 webpack-dev-server (v4) 中，public属性已被替换为有利于 client.webSocketURL对象(source)。我找不到任何资源来使用 ngrok 进行这项工作，因为当我指向 devServer.client.webSocketURL.hostname 时 websocket 没有正确连接到我的 ngrok 隧道。

// WDS v4

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
    },
  },
}

上述实现只是部分解决方案，因为 websocket 没有正确设置，因此它不会热重载。
有谁知道这个问题的解决方案是什么，这样 ngrok 将再次与 webpack-dev-server 一起正常工作？

Answer 1

您还需要提供端口和协议(protocol)才能使其工作。
例如，

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
      port: 0,
      protocol: 'wss',
    },
  },
}

通过上述设置，您的网站可能在 ngrok 隧道中运行，但在 localhost 中无法运行。
不考虑url连接web socket，可以设置webSocketURL至auto://0.0.0.0:0/ws ，它使用来自浏览器的协议(protocol)、主机名和端口。 doc
这也应该解决热重载问题。

devServer: {
  client: {
    webSocketURL: 'auto://0.0.0.0:0/ws'
  },
}