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

有一些webpack dev服务器configuration(它是整个configuration的一部分):

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-Finetworking中)访问我的服务器。 我怎样才能启用它? 谢谢!

(如果你在Mac和像我的networking。)

使用--host 0.0.0.0运行webpack-dev-server – 这可以让服务器监听来自networking的请求,而不仅仅是localhost。

在networking上find您的计算机的地址。 在terminal中,inputifconfig然后查找en1节或类似inet 192.168.1.111

在同一networking上的移动设备上,请访问http://192.168.1.111:8080并享受热重装deviss。

这可能不是一个完美的解决scheme,但我认为你可以使用ngrok 。 Ngrok可以帮助您将本地Web服务器公开到Internet。 您可以将ngrok指向您的本地开发服务器,然后将您的应用程序configuration为使用ngrok URL。

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

 ./ngrok http 8080 

ngrok在这里输出

关于ngrok是,它提供了一个更安全的https版本的暴露url,你可以给世界上任何其他人testing或显示你的工作。

它也有很多的定制可用的命令,如设置一个用户友好的主机名,而不是随机的string在暴露的url和许多其他的事情。

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

对我来说,最终有什么帮助将这个添加到webpack-dev-serverconfiguration中:

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

现在只需要获得你的计算机主机名(OSXterminal上的主机hostname ),添加你定义的端口,你就可以继续使用移动设备了。

与ngrok.io相比,这个解决scheme还可以让你在手机上使用react的热重载模块。