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

There is some webpack dev server config (it's part of the whole config):

有一些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);
    };
  }

I execute webpack with the following command:

我使用以下命令执行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

I can get access to dev server using http://localhost:8080 on my local machine, but I also want to get access to my server from my mobile, tablet (they are in the same Wi-Fi network). How can I enable it? Thanks!

我可以在本地机器上使用http://localhost:8080访问dev服务器，但我也想从我的移动设备、平板电脑(它们在同一个Wi-Fi网络中)访问服务器。我怎样才能实现它呢?谢谢!

4 个解决方案

#1

(If you're on a Mac and network like mine.)

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

Run webpack-dev-server with --host 0.0.0.0 — this lets the server listen for requests from the network, not just localhost.

使用主机0.0.0.0.0.0运行webpack-dev-server——这使服务器能够侦听来自网络的请求，而不仅仅是本地主机。

Find your computer's address on the network. In terminal, type ifconfig and look for the en1 section or the one with something like inet 192.168.1.111

在网络上找到你电脑的地址。在terminal中，键入ifconfig，并查看en1部分或带有类似inet 192.168.1.111的内容。

In your mobile device on the same network, visit http://192.168.1.111:8080 and enjoy hot reloading dev bliss.

在同一网络上的移动设备中，访问http://192.168.1.111:8080，享受热重加载dev bliss。

#2

It may not be the perfect solution but I think you can use ngrok for this. Ngrok can help you expose a local web server to the internet. You can point ngrok at your local dev server and then configure your app to use the ngrok URL.

这可能不是完美的解决方案，但我想你可以使用ngrok。Ngrok可以帮助您将本地web服务器公开到internet。您可以在您的本地开发服务器上点ngrok，然后配置您的应用程序以使用ngrok URL。

e.g Suppose your server is running on port 8080. You can use ngrok to expose that to outer world via running

e。假设您的服务器在端口8080上运行。您可以使用ngrok通过运行将其公开给外部世界

./ngrok http 8080

Good thing about ngrok is that it provides a more secure https version of exposed url which you give to any other person in the world to test or show your work.

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

Also it has lots of customization available in the command such as set a user friendly hostname instead of random string in the exposed url and lots of other thing.

它在命令中也有很多定制，比如设置用户友好的主机名，而不是在公开的url中设置随机字符串等等。

If you just want to open your website to check mobile responsiveness you should go for browersync.

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

#3

You can set your ip address directly in webpack config file:

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

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

#4

For me, what helped eventually was adding this to the webpack-dev-server config:

对我来说，最终帮助我将它添加到webpack-dev-server配置中:

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

and then also changing babel's webpack.config.js file:

然后还要修改babel的webpack.config。js文件:

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

Now just get your computer hostname (hostname on OSX's terminal), add the port you defined, and you're good to go on mobile.

现在只需获取您的计算机主机名(OSX终端上的主机名)，添加您定义的端口，就可以开始移动了。

Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.

而ngrok。io，这个解决方案还可以让你在移动设备上使用react的hot reloading模块。

#1