系列文章傳送門：

1、build/webpack.base.conf.js

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.js

下面是build/dev-server.js中相關代碼和配置的說明

/*
 * npm run dev 調試執行文件，主要用於開發環境
 * 建議先查閱webapck.dev.conf.js  ../config/index.js
 
*/

// npm和node版本檢查
require(‘./check-versions‘)()

var config = require(‘../config‘)
// 下面表示如果如果沒有定義全局變量NODE_ENV，則將NODE_ENV設置為"development"
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require(‘opn‘) // opn插件是用來打開特定終端的，此文件用來在默認瀏覽器中打開鏈接 opn(url)
var path = require(‘path‘)
 
var express = require(‘express‘) // nodejs開發框架express，用來簡化操作，可以當做一個功能強大的http-server
var webpack = require(‘webpack‘)
var proxyMiddleware = require(‘http-proxy-middleware‘) // http中間代理插件，此插件是用來代理請求的只能用於開發環境，目的主要是解決跨域請求後臺api
var webpackConfig = process.env.NODE_ENV === ‘testing‘
  ? require(‘./webpack.prod.conf‘)
  : require(
 
‘./webpack.dev.conf‘)

// default port where dev server listens for incoming traffic
// 下面是express監聽的端口號，因為沒有設置process.env.PORT，所以下面監聽的就是config.dev.port即8080
// 需要自定義設置端口號，可以修改根目錄下的package.json中的dev腳本，加上 set PORT=端口號&&
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
// 默認打開瀏覽器，!!強制轉成Boolean值，防止後續用到這個變量的地方可能出問題
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
// 配置反向代理的配置數據
var proxyTable = config.dev.proxyTable

// 創建express實例
var app = express()
// ※※※ Use express.Router to mock api by SmileSmith ※※※
// ※※※ 用express的router方法來mock發布一些資源 ※※※
var mockRoutes = express.Router()
mockRoutes.post(‘/getCurrentPeroid‘, function (req, res) {
  res.json({
    errno: 0 ,
    data: require(‘../mock/data.currentperoid.json‘)
  });
})
app.use(‘/api‘, mockRoutes) //api開頭的請求用mock數據返回

// 把配置參數傳遞到webpack方法中，返回一個編譯對象，這個編譯對象上面有很多屬性，建議看webpack官方文檔
// 這裏主要是用到裏面的狀態函數 如compilation，compile，after-emit這類的
var compiler = webpack(webpackConfig)

// 下面是webpack-dev-middleware和webpack-hot-middleware兩兄弟，這兩個是黃金組合
var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, {
  publicPath: webpackConfig.output.publicPath, // 以webpack編譯後的內容處理發布地址（/）的請求
  quiet: true // 使用friendly-errors-webpack-plugin插件這個必須設置為true，具體看wepback-dev-config.js
})

var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, {
  log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin(‘compilation‘, function (compilation) {
  compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) { // webpack任何插件都可以使用這種方式，裏面可以傳遞鉤子函數，用來在插件各個階段做特殊處理，鉤子函數種類很多
    hotMiddleware.publish({ action: ‘reload‘ }) // 當插件html-webpack-plugin產出完成之後，強制刷新瀏覽器
    cb()
  })
})

// proxy api requests
// 下面是代理表的處理方法，請關註../config/index.js中開發環境proxyTab中的配置
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === ‘string‘) {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 使用H5的history來做返回，而不是瀏覽器url
// 用來解決單頁面應用，點擊刷新按鈕和通過其他search值定位頁面的404錯誤
app.use(require(‘connect-history-api-fallback‘)())

// serve webpack bundle output
// 讓express用上webpack輸出的模塊中間件
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 讓express用上webpack輸出的熱加載中間件
app.use(hotMiddleware)

// serve pure static assets
// 讓express用上webpack輸出在static中的靜態文件
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static(‘./static‘))

var uri = ‘http://localhost:‘ + port // 這個port上面提到，默認8080

//定義一個Promise用於返回，定義一個_resolve用於編譯完成時的回調裏面調用
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log(‘> Starting dev server...‘)
// 等待模塊編譯完成就可以打開瀏覽器
devMiddleware.waitUntilValid(() => {
  console.log(‘> Listening at ‘ + uri + ‘\n‘)
  // when env is testing, don‘t need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== ‘testing‘) {
    opn(uri)
  }
  _resolve() // readyPromise就可以返回resolve
})

// node.js監聽端口
var server = app.listen(port)

module.exports = {
  ready: readyPromise, // （其它人）調用ready()，就能拿到一個promise對象
  close: () => {
    server.close()
  }
}

參考：http://www.cnblogs.com/ye-hcj/archive/2017/06.html

vue-cli腳手架npm相關文件說明（7）dev-server.js