3

我正在使用webpack/react-starter，我正在尝试使用连接到与我的开发机器相同的 LAN 的移动设备进行测试。因此，我没有输入 localhost:3000，而是将 IP 192.168.XX: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。在这种情况下，正常人会怎么做？

4

2 回答 2

3

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

至于 socket.io 错误，在调用 webpack-dev-server 时，package.json您可以传入一些标志，即 --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-serverlisten指向其中一个0.0.0.0或您的 IP 地址，如下所示：

new WebpackDevServer(webpack(webpackConfig), options).listen(2992, '0.0.0.0', callback);
于 2015-05-06T03:26:22.690 回答
0

在 inline 关闭的情况下，webpack/hot/only-dev-server在我entry的 index.html 底部的 my 和 this 中，它似乎可以在任何地方工作：

<script>
  var devServer = document.createElement('script');
  devServer.setAttribute('src', 'http://' + window.location.host + '/webpack-dev-server.js');
  document.body.appendChild(devServer);
</script>
于 2015-08-19T01:35:02.013 回答