如何从本地网络中的设备访问webpack-dev-server？

Question

有一些webpack开发服务器配置(它是整个配置的一部分):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

我使用以下命令执行webpack:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

我可以在我的本地机器上使用< code > http://localhost:8080 访问开发服务器，但我还想从我的手机、平板电脑(它们在同一个Wi-Fi网络中)访问我的服务器。

如何启用它？谢谢

Answer 1

这可能不是完美的解决方案，但我认为您可以使用ngrok来实现这一点。Ngrok可以帮助您将本地Web服务器暴露给互联网。你可以将 ngrok 指向本地开发服务器，然后将应用配置为使用 ngrok URL。

e、 假设您的服务器在端口8080上运行。您可以使用ngrok通过运行

./ngrok http 8080

ngrok的好处是，它提供了一个更安全的https版本的公开url，您可以将其提供给世界上任何其他人，以测试或展示您的工作。

此外，它在命令中提供了大量定制功能，例如在公开的url中设置用户友好的主机名，而不是随机字符串，以及许多其他功能。

如果你只是想打开你的网站来检查移动响应，你应该去浏览同步。

Answer 2

您可以直接在webpack配置文件中设置您的ip地址:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

Answer 3

（如果您使用的是像我这样的Mac和网络。

使用＜code＞--host 0.0.0.0＜/code＞运行webpack dev server-这使服务器能够侦听来自网络的请求，而不仅仅是本地主机。

在网络上查找您计算机的地址。在“终端”中，键入< code>ifconfig并查找< code>en1部分或类似于< code>inet 192.168.1.111的部分

在同一网络上的移动设备中，访问< code > http://192 . 168 . 1 . 111:8080 并享受热重装开发的乐趣。