Webpack 不会在连接到同一网络的外部设备上自动重新加载站点

Question

我正在构建一个webpack-5样板。我的电脑和手机连接到同一个无线网络。自动重新加载和热重新加载在我的计算机上运行良好。我可以在手机上访问Webpack生成的网站，但当我进行更改时，它不会在手机上自动重新加载。

devServer: {
before: function (app, server) {
server._watch('./src/html/**/*.html');
},
port: 8000,
hot: true,
host: '0.0.0.0',
open: true,
public: '127.0.0.1:8000',
}

Answer 1

尝试使用Wi-Fi网络接口的IP地址作为host。这应该与您在移动设备浏览器地址中指定的访问网页的IP地址相同。

我的经验是，指定的主机主要用于两件事。首先，这个IP地址是绑定的。但是，在这种情况下，更重要的是，主机也被用作客户端连接到热加载Webpack服务器的地址。如果正在本地访问服务器，则0.0.0.0作为主机运行良好，因为客户端和服务器在同一设备上运行。但是，如果它是远程访问的，那么客户端将尝试连接到0.0.0.0，这意味着客户端的设备是本地的，而不是服务器。

此外，我偶然发现了这个现在存档的webpack热客户端的文档文件，其中提到了一个叫做"；通配符主机"；，这可能有助于使远程热重新加载更直接地工作，但我不确定当前的Webpack组件是否支持它。