vue-cli生成的配置檔案解析(1)
阿新 • • 發佈:2019-01-27
一、前言
已經一個月沒寫部落格了。。。這一個月一直在加班,幸好手上的專案一階段也算完了,這週末也有點空閒時間了,於是好好把專案的配置檔案給解讀了一遍。這篇文章就先來解讀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進行解讀。