如何從本地網絡中的設備訪問webpack-dev-server？

有一些的WebPack開發服務器配置（它是整個配置的一部分）：如何從本地網絡中的設備訪問webpack-dev-server？

config.devServer = { 
    contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), 
    stats: { 
     modules: false, 
     cached: false, 
     colors: true, 
     chunk: false 
    }, 
    proxy: [{ 
     path: /^\/api\/(.*)/, 
     target: options.proxyApiTarget, 
     rewrite: rewriteUrl('/$1'), 
     changeOrigin: true 
    }] 
    }; 

    function rewriteUrl(replacePath) { 
    return function (req, opt) { // gets called with request and proxy object 
     var queryIndex = req.url.indexOf('?'); 
     var query = queryIndex >= 0 ? req.url.substr(queryIndex) : ""; 
     req.url = req.path.replace(opt.path, replacePath) + query; 
     console.log("rewriting ", req.originalUrl, req.url); 
    }; 
    }

我執行與以下命令的WebPack：

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

我可以使用http://localhost:8080上可以訪問開發服務器我的本地機器，但我也想從我的移動平板電腦訪問我的服務器（它們位於相同的Wi-Fi網絡中）。我如何啓用它？謝謝！

來源

2016-02-15 malcoauri

似乎應該已經可以工作了，因爲主機設置爲0.0.0.0。 –

@FelixKling，但是我應該在我的iPhone的Safari中使用哪個ip地址呢？ – malcoauri

運行服務器的機器的IP。 –

它可能不是最完美的解決方案，但我認爲你可以使用ngrok。 Ngrok可以幫助你向互聯網公開本地網絡服務器。您可以在您的本地開發服務器上指向ngrok，然後將您的應用配置爲使用ngrok URL。

例如假設您的服務器正在運行端口。您可以使用ngrok揭露，爲外部世界通過運行

./ngrok http 8080

好東西約ngrok的是，它提供了更安全的HTTPS版曝光網址的，你給了其他人世界來測試或展示你的工作。

另外它有很多的定製可用的命令，如設置用戶友好的主機名而不是隨機字符串在暴露的網址和許多其他的東西。

如果你只是想打開你的網站來檢查移動響應，你應該去browersync。

來源

2016-02-15 15:34:34 WitVault

（如果你使用的是Mac和網絡像我這樣。）

運行的WebPack-DEV-服務器--host 0.0.0.0 - 這讓該服務器監聽來自網絡的請求，而不僅僅是本地主機。

在網絡上找到您的計算機的地址。在終端輸入ifconfig並尋找en1部分或一個喜歡的東西inet 192.168.1.111

在您的移動設備在同一網絡上，訪問http://192.168.1.111:8080和享用熱重裝開發的幸福。

來源

2016-02-15 21:42:27 forresto

，適合我。 – hydRAnger

對我來說，它也在工作，但我得到一個空白頁。當我瀏覽標籤頁時，我可以滾動瀏覽網站標題。你可能有一個想法如何解決這個問題？ – moesphemie

也適用於Ubuntu 17.10。如果沒有安裝ifconfig，IP地址可以通過ip addr show找到 – TitanFighter

對於我來說，是什麼幫助最終被加入這給的WebPack-DEV-服務器配置：

new webpackDev(webpack(config), { 
    public: require('os').hostname().toLowerCase() + ':3000' 
    ... 
})

，然後又改變BABEL的webpack.config.js文件：

module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000', 
     ... 
    ] 
    ... 
}

現在只需獲取您的計算機主機名（OSX終端上的hostname），添加您定義的端口，並且您可以繼續使用移動設備。

與ngrok.io相比，此解決方案還可讓您在移動設備上使用react的熱重新加載模塊。

來源

2017-07-10 14:15:21

如何從本地網絡中的設備訪問webpack-dev-server？

回答

相關問題