如何从本地网络中的设备访问 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

我可以在本地机器上使用 http://localhost:8080 访问开发服务器，但我也想通过手机、平板电脑访问我的服务器（它们在同一个 Wi-Fi 网络中）。

如何启用它？谢谢！

Answer 1

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

使用--host 0.0.0.0 运行 webpack-dev-server — 这让服务器可以侦听来自网络的请求，而不仅仅是 localhost。

在网络上查找您的计算机地址。在终端中，输入ifconfig 并查找en1 部分或类似inet 192.168.1.111 的部分

在同一网络上的移动设备上，访问http://192.168.1.111:8080，享受热重载开发的乐趣。

Answer 2

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

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

Answer 3

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

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

./ngrok http 8080

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

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

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

Answer 4

我无法评论以向 forresto 的答案添加更多信息，但在未来（2019 年），由于 --host 0.0.0.0 本身存在安全漏洞，您需要添加 --public 标志。查看this comment了解更多详情。

为了避免“回应其他答案”作为答案，这里是 forresto 的建议以及完成这项工作所需的其他详细信息：

同时添加：

--host 0.0.0.0

和

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

your-host 是主机名（对我来说是 (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",
    ...
  },

Answer 5

对我来说，最终的帮助是将其添加到 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',
        ...
    ]
    ...
}

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

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

Answer 6

我在寻找满足以下要求的解决方案时发现了这个帖子：

• 使用公网IP自动打开URL。例如http://192.168.86.173:8080。因此，它可以直接从浏览器复制并发送到网络中的另一台设备。
• 本地网络中有开发服务器。

这是我想出的解决方案：

devServer: {
  host: '0.0.0.0',
  useLocalIp: true,
}

Answer 7

如果您尝试了此处其他答案中所述的所有内容，但均未成功...还要确保您的计算机上没有运行防火墙或在其上打开所需的端口。