手機上的webpack-dev-server測試

我正在使用webpack/react-starter，我試圖使用與我的開發機器連接到同一LAN的移動設備進行測試。因此，不要將localhost：3000放入我的移動瀏覽器中，而是將IP 192.168.X.X：3000。手機上的webpack-dev-server測試

這是什麼最佳實踐，因爲手機不知道能夠評估本地主機的腳本標記？我把這個hacky腳本放在開發中的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。普通人在這種情況下做什麼？

來源

2015-05-05 mbow

除了在腳本標記中的html中執行此操作之外，您可以將IP置於配置中，並且可以在將它提供給客戶端之前將其替換到腳本url中（將該包拉下來）。

至於socket.io錯誤，在調用webpack-dev-server的package.json時，可以傳入一些標誌，即--host和--port。這些被socket.io用於客戶端連接url。指定這樣的IP後 - IP：

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

現在我可以測試並獲得在移動設備上重新加載熱模塊的好處。

如果您正在使用的WebPack-DEV-服務器API代替CLI的，如與steida/este的情況下，你需要確保的WebPack-DEV-服務器listen s到任何0.0.0.0或您的IP地址一樣這樣的：

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

來源

2015-05-06 03:26:22 mbow

隨着內嵌了，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>

來源

2015-08-19 01:35:02

手機上的webpack-dev-server測試

回答

相關問題