一個(gè)比較老的公司項(xiàng)目，webpack 用的 v3 版本，為了實(shí)現(xiàn)localhost、127.0.0.1和本機(jī)ip可以同時(shí)訪問，webpack的devServer里的 host 我們一般會(huì)設(shè)置成 0.0.0.0，這樣本機(jī)所有 ipv4 地址都可以實(shí)現(xiàn)訪問。

比如我們要將本地運(yùn)行的前端項(xiàng)目，分享給公司的后端、產(chǎn)品、測試...預(yù)覽效果，如果 host 直接設(shè)置的 localhost，運(yùn)行后打開的地址 http://localhost:8080，直接分享給別人是沒法打開的。

為了解決上面局域網(wǎng)共享的問題，我們就需要將前端服務(wù)運(yùn)行在 0.0.0.0，然后將本機(jī)的 ipv4 地址如：http://192.168.2.228:8080 分享給別人，同一局域網(wǎng)內(nèi)的用戶就可以直接訪問了。

瀏覽自動(dòng)打開了http://0.0.0.0:8080

但是當(dāng)我們設(shè)置之后，默認(rèn)自動(dòng)打開的瀏覽器地址和終端輸出的運(yùn)行地址也變成了：http://0.0.0.0:8080，更要命的是這個(gè)地址在 windows 上是被當(dāng)成無效地址沒法訪問的，mac上是可以直接訪問。

查看 webpack 配置，注意只保留了相關(guān)的主要代碼：

當(dāng)設(shè)置了自動(dòng)打開瀏覽器 open 時(shí)，打開的地址會(huì)直接用我們設(shè)置的 host，所以會(huì)打開 http://0.0.0.0:8080。首先需要將服務(wù)運(yùn)行的地址和我們?yōu)g覽器里打開的地址分開設(shè)置，服務(wù)運(yùn)行地址我們需要固定成 0.0.0.0，但瀏覽器里打開的地址我們不需要這個(gè)。

第一點(diǎn)我們可以直接通過 scripts 里的命令來設(shè)置 --host 參數(shù)指定 0.0.0.0，直接在命令行里傳遞的參數(shù)優(yōu)先級最高，修改 package.json:

devServer.public 配置瀏覽器地址

然后可以通過 devServer.public 配置來設(shè)置瀏覽器要打開的地址，不過只能webpack的v3和v4版本使用，而且這個(gè)必須設(shè)置完整的 host:port，但是這個(gè)地方的port我們又不能寫成固定的，因?yàn)槿绻约涸O(shè)置的端口被占用了，webpack-dev-server實(shí)際運(yùn)行起來會(huì)幫我們找一個(gè)系統(tǒng)未被占用的端口。

我們可以借助 portfinder-sync 來查找系統(tǒng)的可用端口，然后設(shè)置給 public，大概的代碼思路如下：

終極解決方案

要獲取實(shí)際使用的端口，webpack 其實(shí)有用到 portfinder 這個(gè)包，我們直接在 webpack.dev.conf.js 里改下最后面的配置就可以了，直接在 portfinder 那設(shè)置下 devWebpackConfig.devServer.public 就可以了，我們還可以借助 address 來獲取本機(jī)的 ipv4 地址，用 chalk 來美化輸出：

webpack-dev-server 的幾個(gè)相關(guān)配置

devServer.host

配置訪問地址，host：主機(jī)、服務(wù)機(jī)，v3 和 v4 版本默認(rèn) localhost，v5 版本默認(rèn)是 0.0.0.0

devServer.port

端口

devServer.public

可以用來設(shè)置默認(rèn)打開瀏覽器的地址，注意 v3 和 v4 版本才有這個(gè)配置，webpack v5 版本已經(jīng)沒有這項(xiàng)配置了

相關(guān)文檔

• portfinder，獲取端口

• portfinder-sync，基于 portfinder 的同步版

• friendly-errors-webpack-plugin

• webpack-dev-server open and host opens wrong URL