一、前言

      已經一個月沒寫部落格了。。。這一個月一直在加班，幸好手上的專案一階段也算完了，這週末也有點空閒時間了，於是好好把專案的配置檔案給解讀了一遍。這篇文章就先來解讀vue-cli生成的配置檔案中的dev-server.js吧。

      從package.json中可以看到如下片段，dev模式是編譯的就是dev-server.js檔案，那麼這個檔案做了哪些配置呢？

"dev": "node build/dev-server.js"

二、dev-server.js

       先貼上程式碼和註釋：

var path = require('path');
//web應用框架
var express = require('express');
var webpack = require('webpack');
var proxyMiddleware = require('http-proxy-middleware');

var config = require('../config').dev;
var webpackConfig = require('./webpack.dev.conf');
var proxyTable = config.proxyTable;

var app = express();
var compiler = webpack(webpackConfig);

//webpack-dev-middleware： 動態監控本地檔案的變化，重新編譯至記憶體中
//配合webpack-hot-middleware使用可以使瀏覽器自動重新整理(否則需要手動重新整理)
//參考：https://segmentfault.com/a/1190000011761306
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: false, //true: 表示靜默版，不會輸出編譯過程中的資訊，
    stats: {
        colors: true,
        chunks: true
    } //輸出編譯過程中的資訊
});

//http://www.webxiaoma.com/blogs/2017/10/28/webpack-hot-middleware
//部分配置在dev-client.js
var hotMiddleware = require('webpack-hot-middleware')(compiler);

// 監聽html-webpack-plugin事件的外掛
//不加這個的話，改變了index.html之後需要手動重新整理才會更新到瀏覽器上
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({action: 'reload'});
        cb();
    })
});


/*
* app.use([url], func[,func]):
* func是 function(req, res, next){}的格式。express會通過next()迴圈執行所有註冊的服務
* 參考：http://www.expressjs.com.cn/4x/api.html
*/

//api請求代理
Object.keys(proxyTable).forEach(function (key) {
    var options = proxyTable[key];
    app.use(proxyMiddleware(key, options));
});

app.use(devMiddleware);
app.use(hotMiddleware);

//處理 H5 history api請求，將get && text/html的請求攔截
app.use(require('connect-history-api-fallback')());

var staticPath = path.posix.join(config.assetsPublicPath, config.assetsSubDirectory);
//託管靜態資源，攔截所有的 /static 的請求，對映到 ./static目錄下
app.use(staticPath, express.static('./static'));

//開啟瀏覽器，資料夾，圖片等的外掛
var opn = require('opn');

var port = config.port, uri = 'http://localhost:' + port;

//編譯完成且成功的情況下的回撥
//比app.listen的回撥更後(先確定監聽是否成功，成功執行app.listen的回撥，再進行編譯/或者是同時進行，編譯執行時間更長)
devMiddleware.waitUntilValid(function () {
    console.log('> Listening at ' + uri + '\n')
});
/*
* app.listen 方法
* app.listen = function() {
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};
同等於：
   var http = require('http');
   http.createServer(app).listen(port, callback)
*
* */
module.exports = app.listen(port, function (err) {
    if (err) {
        console.log(err);
        return;
    }
    if(config.autoOpenBrowser) {
        opn(uri);
    }
});
 

通過上面的程式碼註釋基本是能理解dev-server.js的每一行配置的意思了。這裡做個總結：

1. 通過express建立一個web應用框架；

2. 通過webpack(config)將工程編譯成單個檔案；

3.通過webpack-dev-middleware外掛建立資源連線，並監聽檔案的變化。配合webpack-hot-middleware可以動態重新整理瀏覽器；

4.代理api請求、h5 history請求、靜態資源請求；

5.啟動服務。

下篇將會對webpack.base.conf.js和webpack.dev.conf.js進行解讀。