development-environment - 移动设备上的 webpack-dev-server 测试

Question

我正在使用 webpack/react-starter我正在尝试使用连接到与我的开发机器相同的 LAN 的移动设备进行测试。因此，我没有输入 localhost:3000，而是将 IP 192.168.X.X:3000 放入我的移动浏览器中。

由于移动设备不知道能够使用 localhost 评估脚本标签，因此最佳做法是什么？我将这个 hacky 脚本放在了在 dev 中提供的 html 中，但这感觉不对。

<script>
    //inserts new script tag with localhost replaced by ip
    if('ontouchstart' in window){
        var ipRegex = /([0-9]{3}\.){2}[0-9]{1,3}\.[0-9]{1,3}/;
        var ip = window.location.href.match(ipRegex)[0];
        var url = Array.prototype.shift.call(document.getElementsByTagName('script')).getAttribute('src');
        var newScript = document.createElement('script');
        newScript.src=url.replace('localhost',ip);
        document.body.appendChild(newScript);
    }
</script>

这会获取捆绑包，但 socket.io 无法连接到 webpack-dev-server [Error] Failed to load resource: Could not connect to the server. (socket.io, line 0)这不会让我使用 HMR。在这种情况下，正常人会怎么做？

Answer 1

除了在脚本标签中的 html 中执行此操作外，您还可以将 IP 放入配置中，并且可以在将其提供给客户端之前将其替换为脚本 url(拉下捆绑包)。

至于 socket.io 错误，在 package.json 中对 webpack-dev-server 的调用中您可以传入一些标志，即--host 和--port。这些由 socket.io 用于客户端连接 url。在 --host 之后指定 IP，如下所示:

webpack-dev-server --config webpack-dev-server.config.js --progress --colors --host 192.168.x.x --port 2992 --inline

现在我可以在手机上测试并获得热模块重新加载的好处。

如果你使用 webpack-dev-server API而不是 CLI，就像 steida/este 的情况一样，您需要确保 webpack-dev-server listen转至 0.0.0.0或您的 IP 地址如下:

new WebpackDevServer(webpack(webpackConfig), options).listen(2992, '0.0.0.0', callback);