Question

有一些webpack dev服务器配置（它是整个配置的一部分）：

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 - 这可以让服务器侦听来自网络的请求，而不仅仅是本地主机。

在网络上查找您的计算机地址。在终端中，键入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,
    ...
}

Answer 3

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

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

将其公开给外部世界

./ngrok http 8080

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

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

如果您只是想打开自己的网站来检查移动设备的响应能力，那么您应该选择browersync。

Answer 4

对我来说，最终有助于将其添加到webpack-dev-server config：

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 5

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

为了避免“响应其他答案”作为答案，这里提供了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",
    ...
  },

Answer 6

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

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

这是我想出的解决方案：

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

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

6 个答案: