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

有一些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网络中）访问服务器。

如何启用它？谢谢！

（如果您使用的是Mac，并且使用的是我的网络）。

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

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

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

您可以直接在webpack配置文件中设置IP地址：

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

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

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

./ngrok http 8080

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

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

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

对我而言，最终帮助将其添加到webpack-dev-server配置中的是：

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

然后还更改babel的webpack.config.js文件：

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

现在，只需获取您的计算机主机名（hostname在OSX终端上），添加您定义的端口，就可以继续使用移动设备了。

与ngrok.io相比，此解决方案还使您可以在移动设备上使用react的热重载模块。

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

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

同时添加：

--host 0.0.0.0

和

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

您的主机是主机名（对我来说是（name）s-macbook-pro.local），而port是您要访问的任何端口（同样，对我来说是8081）。

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

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