vue項目中webpack-dev-server的open和host0.0.0.0配置沖突

一個比較老的公司項目，webpack 用的 v3 版本，為了實作localhost、127.0.0.1和本機ip可以同時通路，webpack的devServer裡的 host 我們一般會設定成 0.0.0.0，這樣本機所有 ipv4 位址都可以實作通路。

比如我們要将本地運作的前端項目，分享給公司的後端、産品、測試...預覽效果，如果 host 直接設定的 localhost，運作後打開的位址 http://localhost:8080，直接分享給别人是沒法打開的。

為了解決上面區域網路共享的問題，我們就需要将前端服務運作在 0.0.0.0，然後将本機的 ipv4 位址如：http://192.168.2.228:8080 分享給别人，同一區域網路内的使用者就可以直接通路了。

浏覽自動打開了http://0.0.0.0:8080

但是當我們設定之後，預設自動打開的浏覽器位址和終端輸出的運作位址也變成了：http://0.0.0.0:8080，更要命的是這個位址在 windows 上是被當成無效位址沒法通路的，mac上是可以直接通路。

檢視 webpack 配置，注意隻保留了相關的主要代碼：

// webpack.dev.conf.js
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.open,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})           

當設定了自動打開浏覽器 open 時，打開的位址會直接用我們設定的 host，是以會打開 http://0.0.0.0:8080。首先需要将服務運作的位址和我們浏覽器裡打開的位址分開設定，服務運作位址我們需要固定成 0.0.0.0，但浏覽器裡打開的位址我們不需要這個。

第一點我們可以直接通過 scripts 裡的指令來設定 --host 參數指定 0.0.0.0，直接在指令行裡傳遞的參數優先級最高，修改 package.json:

{
  "name": "front-end",
  "version": "1.0.0",
  "description": "用戶端",
  "author": "cafehaus",
  "private": true,
  "scripts": {
    "predev": "yarn",
    "dev": "webpack-dev-server --inline --progress --host 0.0.0.0 --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
}           

devServer.public 配置浏覽器位址

然後可以通過 devServer.public 配置來設定浏覽器要打開的位址，不過隻能webpack的v3和v4版本使用，而且這個必須設定完整的 host:port，但是這個地方的port我們又不能寫成固定的，因為如果自己設定的端口被占用了，webpack-dev-server實際運作起來會幫我們找一個系統未被占用的端口。

我們可以借助 portfinder-sync 來查找系統的可用端口，然後設定給 public，大概的代碼思路如下：

const config = require('../config')
const portFinderSync = require('portfinder-sync')
const port = portFinderSync.getPort(config.dev.port)

const devServer = {
  host: 'localhost',
  open: true,
  port,
  public: `localhost:${port}`,
}           

終極解決方案

要擷取實際使用的端口，webpack 其實有用到 portfinder 這個包，我們直接在 webpack.dev.conf.js 裡改下最後面的配置就可以了，直接在 portfinder 那設定下 devWebpackConfig.devServer.public 就可以了，我們還可以借助 address 來擷取本機的 ipv4 位址，用 chalk 來美化輸出：

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const address = require('address')
const chalk = require('chalk')

const HOST = process.env.HOST || config.dev.host || '0.0.0.0' // 服務位址，設定成 0.0.0.0 可以讓本機上所有 ipv4 位址通路
const LOCAL_HOST = config.dev.host || 'localhost' // 本地通路位址
const LOCAL_IP = address.ip() // 本地 ip
const PORT = (process.env.PORT && Number(process.env.PORT)) || config.dev.port || 8080 // 端口

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = PORT
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      devWebpackConfig.devServer.public = `${LOCAL_HOST}:${port}`,

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            `  App running at:`,
            `  - Local:   ` + chalk.cyan(`http://${LOCAL_HOST}:${port}`)
            `  - Network: ` + chalk.cyan(`http://${LOCAL_IP}:${port}`)
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})           

webpack-dev-server 的幾個相關配置

• devServer.host：配置通路位址，host：主機、服務機，v3 和 v4 版本預設 localhost，v5 版本預設是 0.0.0.0
• devServer.port：端口
• devServer.public：可以用來設定預設打開浏覽器的位址，注意 v3 和 v4 版本才有這個配置，webpack v5 版本已經沒有這項配置了

相關插件和文檔

• portfinder，擷取端口
• portfinder-sync，基于 portfinder 的同步版
• friendly-errors-webpack-plugin
• webpack-dev-server open and host opens wrong URL