本文系統講解vue-cli腳手架build目錄中的dev-server.js配置檔案

• 這個配置檔案是命令npm run dev 和 npm run start 的入口配置檔案，主要用於開發環境
• 由於這是一個系統的配置檔案，將涉及很多的模組和外掛，所以這部分內容我將分多個文章講解，請關注我部落格的其他文章

關於註釋

• 當涉及到較複雜的解釋我將通過標識的方式(如（1）)將解釋寫到單獨的註釋模組，請自行檢視

上程式碼

// 匯入check-versions.js檔案，並且執行匯入的函式，用來確定當前環境node和npm版本是否符合要求
require('./check-versions'
 
)()
// 匯入config目錄下的index.js配置檔案，此配置檔案中定義了生產和開發環境中所要用到的一些引數
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)
}
// opn外掛是用來開啟特定終端的，此檔案用來在預設瀏覽器中開啟連結 opn(url)
var opn = require('opn'
 
)
// nodejs路徑模組
var path = require('path')
// nodejs開發框架express，用來簡化操作，有興趣可以自行去了解
var express = require('express')
// 引入webpack模組，用來使用webpack內建外掛
var webpack = require('webpack')
// 引入http-proxy-middleware外掛，此外掛是用來代理請求的只能用於開發環境，目的主要是解決跨域請求後臺api
var proxyMiddleware = require('http-proxy-middleware')
// 下面的意思是指，如果不是testing環境就引入webpack.dev.conf.js配置檔案
 

// 關於webpack.dev.conf.js配置檔案請關注我的相關文章，建議現在就去看，否則後面看著吃力
var webpackConfig = process.env.NODE_ENV === 'testing' ?
    require('./webpack.prod.conf') :
    require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic
// 下面是webpack-dev-server 監聽的埠號，因為沒有設定process.env.PORT，所以下面監聽的就是config.dev.port
//即8080
var port = process.env.PORT || config.dev.port
    // automatically open browser, if not set will be false
// 下面是true,至於為啥，本來就是true還要加!!兩個感嘆號，估計是vue作者裝了個逼吧
var autoOpenBrowser = !!config.dev.autoOpenBrowser
    // Define HTTP proxies to your custom API backend
    // https://github.com/chimurai/http-proxy-middleware
// 下面是解決開發環境跨域問題的外掛，我在config目錄index.js文章中有介紹，自行檢視
var proxyTable = config.dev.proxyTable
// 下面是建立node.js的express開發框架的例項，別問我為什麼這樣，自己看node.js去吧
var app = express()
// 把配置引數傳遞到webpack方法中，返回一個編譯物件，這個編譯物件上面有很多屬性，自己去看吧，主要是用到裡面
//的狀態函式 如compilation，compile，after-emit這類的
var compiler = webpack(webpackConfig)
// 下面是webpack-dev-middleware和webpack-hot-middleware兩兄弟，這兩個是黃金組合
// 而vue作者用這兩個外掛也是用的最基本的形式，詳情看(1) (2)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true  // 使用friendly-errors-webpack-plugin外掛這個必須設定為true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
        log: () => {} // 使用friendly-errors-webpack-plugin外掛這個必須設定為true
    })
    // force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function(compilation) {
// webpack任何一個外掛都plugin這個方法，裡面可以傳遞鉤子函式，用來在外掛各個階段做特殊處理，鉤子函式種類很多
    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
        // 當外掛html-webpack-plugin產出完成之後，強制重新整理瀏覽器
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})

// proxy api requests
Object.keys(proxyTable).forEach(function(context) {
// 下面是代理表的處理方法，看看就行了，幾乎用不上，除非你是全棧，不用webpack-dev-server，使用後臺語言做伺服器
    var options = proxyTable[context]
    if (typeof options === 'string') {
        options = { target: options }
    }
    app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 這個外掛是用來解決單頁面應用，點選重新整理按鈕和通過其他search值定位頁面的404錯誤
// 詳情請看(3)
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// app.use是在響應請求之前執行的，用來指定靜態路徑，掛載靜態資源
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
// 下面的staticPath是 static ，path.posix.join
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 掛載靜態資源，下面的方法是用虛擬目錄來訪問資源，staticPath就是虛擬目錄路徑，不管設不設定都是static
app.use(staticPath, express.static('./static'))
// 下面結果就是 'http://localhost:8080'
var uri = 'http://localhost:' + port

// 下面是es6的promise規範，用來處理巢狀請求的
var _resolve
var readyPromise = new Promise(resolve => {
    _resolve = resolve // resolve是一個回撥函式專門用來傳遞成功請求的資料
})
// 下面是載入動畫
console.log('> Starting dev server...')
// waitUntilValid是webpack-dev-middleware例項的方法，在編譯成功之後呼叫
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() // 這裡沒有傳遞資料，這只是在模擬
})
// node.js監聽埠
var server = app.listen(port)
// 這個匯出物件是用來對外提供操作伺服器和接受資料的介面，vue作者可謂考慮頗深啊
module.exports = {
    ready: readyPromise, // promise例項，可以通過readyPromise.then收到資料
    close: () => {
        server.close() // 關閉伺服器
    }
}

解釋

(1)webpack-dev-middleware外掛

• 這個外掛只能用於開發環境，下面是這個外掛的解釋
• 這是一個簡潔的webpack包裝中介軟體，這個外掛做這個主要為檔案做一件事情，就是當檔案修改後提交到webpack伺服器，然後處理這些修改後的檔案
• 這個外掛有一下幾個優點
  
  • 第一，所有的檔案都是寫在disk上，檔案的處理在記憶體中進行
  • 第二，如果檔案在watch模式下被改動，這個中介軟體將不會為這些老的bundle服務了，如果這些老的bundle上有檔案改動， 這個中介軟體將不會發送請求，而是等到當前編譯結束，當前最新的檔案有改動，才會傳送請求，所以你不需要手動重新整理了
  • 第三，我會在以後的版本中優化
• 總結，這個中介軟體是webpack-dev-server的核心，實現修改檔案，webapack自動重新整理的功能
• 安裝 npm install webpack-deb-middleware --save-dev
• 使用方法如下，下面的使用方法也是webpack-dev-server實現的程式碼

 var webpackMiddleware = require("webpack-deb-middleware");
   app.use(webpackMiddleware(webpack({obj1}),{obj2}))

• app.use是express的方法，用來設定靜態路徑
• 上面的obj1是webpack配置物件，使用webpack方法轉換成compiler編譯物件，obj2配置的是更新檔案打包後的配置，使用
• webpackMiddleware處理之後，就返回一個靜態路徑，方便獲取檔案關於obj2的配置項，可以自行查閱，必須要新增publicPath
• 我們的靜態伺服器是node.js，現在檔案修改了，webpack-dev-middleware將修改的檔案編譯後，告訴nodejs伺服器哪些檔案修改了
• 並且把最新的檔案上傳到靜態伺服器

(2)webpack-hot-middleware外掛

• 這個外掛是用來將webpack-dev-middleware編譯更新後的檔案通知瀏覽器，並且告訴瀏覽器如何更新檔案，從而實現 Webpack hot reloading
• 將這兩個外掛配合起來使用你就可以不需要webpack-dev-sever，即可以自己實現hot-replacement熱替換功能，
• webpack-hot-middleware外掛通知瀏覽器更新檔案大致是通過一個json物件實現的，具體實現機制這裡不多說了，下面來看具體用法
• 安裝 npm install webpack-hot-middleware --save-dev
• 在使用了webpack-dev-middleware之後，在新增如下程式碼即可

app.use(require("webpack-hot-middleware")(compiler));

(3)connect-history-api-fallback外掛

• 因為在開發單頁面應用時，總的來說專案就一個頁面，如果通過點選重新整理按鈕並且此時連結指的不是主頁的地址，就會404；或者我通過其他的連結比如 /login.html 但是並沒有login.html就會報錯
• 而這個外掛的作用就是當有不正當的操作導致404的情況，就把頁面定位到預設的index.html
• 使用起來也比較簡單，記住這樣用就可以了
  安裝 npm install --save connect-history-api-fallback
  使用 var history = require('connect-history-api-fallback');

 var express = require('express');
   var app = express();
   app.use(history());