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-服务器listen到0.0.0.0或您的IP地址如下：

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

Answer 2

在我webpack/hot/only-dev-server中的内联关闭，entry以及我的index.html底部，它似乎可以在任何地方使用：

<script>
  var devServer = document.createElement('script');
  devServer.setAttribute('src', 'http://' + window.location.host + '/webpack-dev-server.js');
  document.body.appendChild(devServer);
</script>

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

2 个答案: