本文系統講解vue-cli腳手架build目錄中的dev-server.js配置檔案
- 這個配置檔案是指令
npm run dev
npm run start
- 由于這是一個系統的配置檔案，将涉及很多的子產品和插件，是以這部分内容我将分多個文章講解，請關注我部落格的其他文章
- 關于注釋
- 當涉及到較複雜的解釋我将通過辨別的方式(如（1）)将解釋寫到單獨的注釋子產品，請自行檢視
- 上代碼
// 導入check-versions.js檔案，并且執行導入的函數，用來确定目前環境node和npm版本是否符合要求
// 關于check-versions請檢視我部落格check-versions的相關文章
require('./check-versions')()
// 導入config目錄下的index.js配置檔案，此配置檔案中定義了生産和開發環境中所要用到的一些參數
// 關于index.js的檔案解釋請看我部落格的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，具體看我的wepback-dev-config.js
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {} // 使用friendly-errors-webpack-plugin插件這個必須設定為true，具體看我的wepback-dev-config.js
})
// 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());