如何从本地网络中的设备访问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在我的本地计算机上使用dev服务器,但我也想从我的手机,平板电脑访问我的服务器(它们在同一个Wi-Fi网络中).

我该如何启用它？谢谢!

Answer 1

(如果你像我一样在Mac和网络上.)

运行webpack-dev-server --host 0.0.0.0- 这使服务器可以侦听来自网络的请求,而不仅仅是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,
    ...
}

Answer 3

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

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

./ngrok http 8080

好消息ngrok是,它提供了一个更安全的https版暴露网址,您可以将其提供给世界上任何其他人来测试或展示您的工作.

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

如果您只是想打开您的网站来检查移动响应,那么您应该选择browersync.

Answer 4

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

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

网页包 4

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

网页包5

devServer: {
  host: 'local-ip',
}

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',
        ...
    ]
    ...
}

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

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

Answer 6

我无法发表评论以向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",
    ...
  },

Answer 7

使用webpack-dev-serverv4.0.0+ 你需要

devServer: {
  host: '0.0.0.0',
  port: 8030,
  allowedHosts: ['all'] // or use 'auto' for slight more security
}