如何从本地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
是,它提供了一个更安全的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的热重载模块。