Javascript 如何从本地网络中的设备访问 webpack-dev-server？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35412137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get access to webpack-dev-server from devices in local network?
提问by malcoauri
There is some webpack dev server config (it's part of the whole config):
有一些 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('/'),
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:8080on 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).
我可以http://localhost:8080在我的本地机器上访问开发服务器，但我也想从我的手机、平板电脑（它们在同一个 Wi-Fi 网络中）访问我的服务器。
How can I enable it? Thanks!
我怎样才能启用它？谢谢！
回答by forresto
(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.
使用 webpack-dev-server 运行--host 0.0.0.0——这可以让服务器监听来自网络的请求，而不仅仅是本地主机。
Find your computer's address on the network. In terminal, type ifconfigand look for the en1section or the one with something like inet 192.168.1.111
在网络上找到您计算机的地址。在终端中，键入ifconfig并查找该en1部分或具有类似内容的部分inet 192.168.1.111
In your mobile device on the same network, visit http://192.168.1.111:8080and enjoy hot reloading dev bliss.
在同一网络上的移动设备上，访问http://192.168.1.111:8080并享受热重载 dev bliss。
回答by Igor Alemasow
You can set your ip address directly in webpack config file:
您可以直接在 webpack 配置文件中设置您的 IP 地址：
devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
disableHostCheck: true,
...
}
回答by WitVault
It may not be the perfect solution but I think you can use ngrokfor this. Ngrokcan help you expose a local web serverto 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
例如，假设您的服务器在端口8080上运行。您可以使用 ngrok 通过运行将其暴露给外部世界
./ngrok http 8080
Good thing about ngrokis that it provides a more secure httpsversion 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 hostnameinstead 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。
回答by Andrus Asumets
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 (hostnameon OSX's terminal), add the port you defined, and you're good to go on mobile.
现在只需获取您的计算机主机名（hostname在 OSX 的终端上），添加您定义的端口，您就可以继续使用移动设备了。
Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.
与 ngrok.io 相比，该解决方案还可以让您在移动设备上使用 react 的热重载模块。
回答by Blitz
I could not comment in order to add additional information to forresto's answer, but here in the future (2019) you'll need to add a --publicflag due to a security vulnerability with --host 0.0.0.0alone. Check out this commentfor more details.
我无法发表评论以便为 forresto 的答案添加其他信息，但在未来（2019 年）中，--public由于安全漏洞，您需要--host 0.0.0.0单独添加一个标志。查看此评论以获取更多详细信息。
In order to avoid "responding to other answers" as an answer here's forresto's advice plus the additional details you'll need to make this work:
为了避免“回复其他答案”作为答案，这里是 forresto 的建议以及您需要完成的其他详细信息：
Add both:
添加两者：
--host 0.0.0.0
--host 0.0.0.0
and
和
--public <your-host>:<port>
--public <your-host>:<port>
where your-host is the hostname (for me it is (name)s-macbook-pro.local)) and port is whatever port you're trying to access (again, for me it's 8081).
其中 your-host 是主机名（对我来说是 (name)s-macbook-pro.local)），port 是您尝试访问的任何端口（同样，对我来说是 8081）。
So here's what my package.json looks like:
所以这是我的 package.json 的样子：
"scripts": {
...
"start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
...
},
