3

webpack/react-starterを使用しており、開発マシンと同じ LAN に接続されたモバイル デバイスを使用してテストしようとしています。そのため、localhost:3000 を入力する代わりに、IP 192.168.XX:3000 をモバイル ブラウザーに入力しました。

モバイルはローカルホストでスクリプトタグを評価できることを知らないため、これのベストプラクティスは何ですか? このハッキーなスクリプトを 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 を渡すことができます。これらは、クライアント側の接続 URL のために socket.io によって使用されます。次のように --host の後に IP を指定します。

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

これで、モバイルでのホット モジュール リロードの利点をテストして取得できるようになりました。

steida /esteの場合のように、CLI の代わりにwebpack-dev-server APIを使用している場合は、次のように webpack-dev-serverがいずれかまたは IP アドレスに接続されていることを確認する必要があります。listen0.0.0.0

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

インラインをオフにすると、私の index.html の下部にあるwebpack/hot/only-dev-servermyと this で、どこからでも動作するように見えます。entry

<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 に答える