webpack-移动端dev-server测试

Question

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

既然移动设备不知道如何使用localhost计算脚本标记，那么最好的做法是什么？我将这个粗糙的脚本放在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- [Error] Failed to load resource: Could not connect to the server. (socket.io, line 0)服务器，这将不允许我使用HMR。在这种情况下，普通人会怎么做？

Answer 1

除了在html中的script标签中执行此操作之外，您可以将IP放在config中，并且可以在将其提供给客户端之前将其替换到脚本url中(该url会拉出捆绑包)。

至于端口错误，在调用package.json中的webpack-dev- socket.io时，您可以传入一些标志，即--主机和--端口。这些url由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开发服务器API，而不是steida/este的CLI，则需要确保将webpack开发服务器的listen设置为0.0.0.0或IP地址，如下所示：

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

Answer 2

通过关闭内联，entry中的webpack/hot/only-dev-server和index.html底部的这个，它似乎可以在任何地方工作：

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