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

JavaScript Webpack

阿飞

2020-03-23

有一些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

我可以使用http://localhost:8080本地计算机访问开发服务器,但我也想通过移动平板电脑(它们位于同一Wi-Fi网络中)访问服务器。

如何启用它?谢谢!

第2681篇《如何从本地网络中的设备访问webpack-dev-server?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
达蒙Mandy 2020.03.23

它可能不是完美的解决方案,但我认为您可以为此使用ngrokNgrok可以帮助您将本地Web服务器公开到Internet。您可以将ngrok指向本地开发服务器,然后将您的应用程序配置为使用ngrok URL。

例如,假设您的服务器在端口8080上运行您可以使用ngrok通过运行将其暴露给外部世界

./ngrok http 8080

ngrok输出在这里

好消息ngrok是,它提供了公开URL 的更安全的https版本,您可以将该URL提供给世界上任何其他人以测试或展示您的作品。

它还在命令中提供了许多自定义功能,例如设置用户友好的主机名,而不是在公开的url中设置随机字符串以及其他很多东西。

如果您只想打开网站来检查移动设备的响应能力,则应该使用browersync

飞云 2020.03.23

我无法发表评论以向Forresto的答案添加其他信息,但--public由于安全漏洞,--host 0.0.0.0单独使用时,在未来(2019年)您将需要添加标志查看此评论以获取更多详细信息。

为了避免“响应其他答案”作为答案,这里提供了forresto的建议以及进行此工作所需的其他详细信息:

同时添加:

--host 0.0.0.0

--public <your-host>:<port>

您的主机是主机名(对我来说是(name)s-macbook-pro.local),端口是您要访问的任何端口(同样,对我来说是8081)。

所以这是我的package.json的样子:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },

小卤蛋 2020.03.23

(如果您使用的是Mac,并且使用的是我的网络)。

使用以下命令运行webpack-dev-server --host 0.0.0.0:这使服务器可以侦听来自网络的请求,而不仅仅是本地主机。

在网络上找到您的计算机的地址。在终端中,键入ifconfig并查找该en1部分或带有类似内容的部分inet 192.168.1.111

在同一网络上的移动设备中,访问http://192.168.1.111:8080并享受热重装开发的幸福。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android