带有 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 等框架中开发应用程序时特别有用，因为我们可以创建从本地机器到公共 URL 的安全隧道，以便轻松测试 Web 应用程序。

但是，在最新版本的 webpack-dev-server (v4) 中，该public属性已被替换为有利于client.webSocketURL对象 ( source )。我无法找到任何资源来使用 ngrok 进行这项工作，因为当我将 指向devServer.client.webSocketURL.hostname我的 ngrok 隧道时，websocket 没有正确连接。

// WDS v4

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

上述实现只是部分解决方案，因为 websocket 没有正确设置，因此它不会热重载。

有谁知道解决这个问题的方法是什么，这样 ngrok 将再次与 webpack-dev-server 一起工作？

Answer 1

我不确定这是否是完整的解决方案，但这对我有用。您可以根据需要将主机名设置为 localhost 并添加一些端口。运行开发服务器后，您可以使用 公开端口ngrok http {port}。例子：ngrok http 3000。