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

【问题标题】：webpack-dev-server test on mobile移动设备上的 webpack-dev-server 测试
【发布时间】：2015-05-05 23:08:31
【问题描述】：

我正在使用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。正常人在这种情况下会怎么做？

【问题讨论】：

标签： development-environment webpack mobile-browser webpack-dev-server

【解决方案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 listens 到 @ 987654326@ 或您的 IP 地址如下：

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

【讨论】：

【解决方案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>

【讨论】：