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

有一些 webpack dev server 配置(它是整个配置的一部分) :

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-Fi 网络中)访问我的服务器。

我怎么启动它? 谢谢！

136836 次浏览
小开

这可能不是完美的解决方案，但我认为你可以使用 恩格罗克为这一点。 Ngrok 可以帮助你 公开本地网络服务器到互联网。 您可以将 ngrok 指向本地 dev 服务器，然后将应用程序配置为使用 ngrok URL。

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

./ngrok http 8080

ngrok output here

关于 ngrok的好处是，它提供了一个更安全的 Https版本的暴露网址，你给任何其他人在世界上测试或显示您的工作。

此外，它有很多可用的自定义命令，如设置一个用户友好的 主机名，而不是随机字符串在暴露的网址和其他很多东西。

如果你只是想打开你的网站，检查手机响应，你应该去 浏览器同步。

小开

(如果你用的是苹果电脑，而且像我用的是网络。)

使用 --host 0.0.0.0运行 webpack-dev-server ーー这使服务器可以侦听来自网络的请求，而不仅仅是本地主机。

在网络上查找计算机的地址。在终端中，键入 ifconfig并查找 en1部分或类似于 inet 192.168.1.111的部分

在您的移动设备在同一网络，访问 http://192.168.1.111:8080和享受热重新加载开发极乐。

小开

对我来说，最终起作用的是把它添加到 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',
...
]
...
}

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

与 ngrok.io 相比，这个解决方案还允许您在手机上使用 response 的热重载模块。

小开

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

devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
disableHostCheck: true,
...
}
小开

为了给 Forresto 的答案添加更多的信息，我不能做出评论，但是在未来(2019年) ，由于 --host 0.0.0.0本身的安全漏洞，您将需要添加一个 --public标志。查看 此评论了解更多细节。

为了避免“回应其他答案”作为一个答案，以下是 Forresto 的建议以及你需要做到这一点的额外细节:

加上两者:

--host 0.0.0.0

还有

--public <your-host>:<port>

其中 your-host 是主机名(对我来说是(name) s-macbook-pro。Local)) ，端口是你想要访问的任何端口(对我来说是8081)。

这就是我的包 json 的样子:

  "scripts": {
...
"start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
...
},
小开

我在寻找能够满足以下要求的解决方案时发现了这个线程:

  • 使用公共 IP 自动打开 URL。例如，http://192.168.86.173:8080。这样就可以从浏览器中复制并发送到网络中的其他设备。
  • Dev 服务器在本地网络中可用。

网络包4

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

网络包5

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

如果您尝试了其他答案中的所有内容，但都没有成功... ... 还要确保您的机器上没有运行防火墙，或者没有打开所需的端口。

小开

在 webpack-dev-server v4.0.0 + 中，您需要

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

提交答案