相信vue使用者對(duì)vue-cli都不會(huì)陌生，甚至可以說，很熟悉了，但對(duì)其webpack的配置可能知之甚少吧。

過完年回來(lái)后，我接手了公司的新項(xiàng)目。新項(xiàng)目是一個(gè)spa。很自然，我就想到了vue-cli腳手架了，當(dāng)時(shí)研究一下它的webpack配置。于是，就有了其他的內(nèi)容。

今天這篇文章，是在原來(lái)的基礎(chǔ)上，增加了一些新版本的內(nèi)容，但實(shí)質(zhì)上變化不大。

說明

此倉(cāng)庫(kù)為vue-cli webpack的配置分析，其實(shí)只是在源碼中加上注釋而已。大家查看詳細(xì)分析，可以從后面提到的入口文件開始查看。

分析不包括check-versions.js文件，因?yàn)閏heck-versions.js是檢測(cè)npm和node版本，不涉及webpack，所以就沒有對(duì)check-versions.js進(jìn)行分析。同時(shí)，也不包括測(cè)試部分的代碼，該分析只是針對(duì)開發(fā)和生產(chǎn)環(huán)境的webpack配置進(jìn)行分析。

vue-cli 版本

2.8.1

入口

從package.json可以看到開發(fā)和生產(chǎn)環(huán)境的入口。

 "scripts": {  "dev": "node build/dev-server.js",  "build": "node build/build.js" }

開發(fā)環(huán)境

開發(fā)環(huán)境的入口文件是 build/dev-server.js。

dev-server.js

該文件中，使用express作為后端框架，結(jié)合一些關(guān)于webpack的中間件，搭建了一個(gè)開發(fā)環(huán)境。

// 配置文件var config = require('../config')// 如果 Node 的環(huán)境無(wú)法判斷當(dāng)前是 dev / product 環(huán)境// 使用 config.dev.env.NODE_ENV 作為當(dāng)前的環(huán)境if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// 可以強(qiáng)制打開瀏覽器并跳轉(zhuǎn)到指定 url 的插件// https://github.com/sindresorhus/opnvar opn = require('opn')// node自帶的文件路徑工具var path = require('path')// express框架var express = require('express')var webpack = require('webpack')// 測(cè)試環(huán)境，使用的配置與生產(chǎn)環(huán)境的配置一樣// 非測(cè)試環(huán)境，即為開發(fā)環(huán)境，因?yàn)榇宋募挥袦y(cè)試環(huán)境和開發(fā)環(huán)境使用var proxyMiddleware = require('http-proxy-middleware')var webpackConfig = process.env.NODE_ENV === 'testing'// 生產(chǎn)環(huán)境配置文件 ? require('./webpack.prod.conf') // 開發(fā)環(huán)境配置文件 : require('./webpack.dev.conf')// 端口號(hào)為命令行輸入的PORT參數(shù)或者配置文件中的默認(rèn)值var port = process.env.PORT || config.dev.port// 配置文件中 是否自動(dòng)打開瀏覽器var autoOpenBrowser = !!config.dev.autoOpenBrowser// 配置文件中 http代理配置// https://github.com/chimurai/http-proxy-middlewarevar proxyTable = config.dev.proxyTable// 啟動(dòng) express 服務(wù)var app = express()// 啟動(dòng) webpack 編譯var compiler = webpack(webpackConfig)// 可以將編譯后的文件暫存到內(nèi)存中的插件// https://github.com/webpack/webpack-dev-middlewarevar devMiddleware = require('webpack-dev-middleware')(compiler, { // 公共路徑，與webpack的publicPath一樣 publicPath: webpackConfig.output.publicPath, // 不打印 quiet: true})// Hot-reload 熱重載插件// https://github.com/glenjamin/webpack-hot-middlewarevar hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {}})// 當(dāng)tml-webpack-plugin template更改之后，強(qiáng)制刷新瀏覽器compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  hotMiddleware.publish({ action: 'reload' })  cb() })})// 將 proxyTable 中的請(qǐng)求配置掛在到啟動(dòng)的 express 服務(wù)上Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 如果options的數(shù)據(jù)類型為string，則表示只設(shè)置了url， // 所以需要將url設(shè)置為對(duì)象中的 target的值 if (typeof options === 'string') {  options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})// 使用 connect-history-api-fallback 匹配資源// 如果不匹配就可以重定向到指定地址// https://github.com/bripkens/connect-history-api-fallbackapp.use(require('connect-history-api-fallback')())// 將暫存到內(nèi)存中的 webpack 編譯后的文件掛在到 express 服務(wù)上app.use(devMiddleware)// 將 Hot-reload 掛在到 express 服務(wù)上app.use(hotMiddleware)// 拼接 static 文件夾的靜態(tài)資源路徑var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)// 靜態(tài)文件服務(wù)app.use(staticPath, express.static('./static'))var uri = 'http://localhost:' + port// 編譯成功后打印網(wǎng)址信息devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '/n')})module.exports = app.listen(port, function (err) { if (err) {  console.log(err)  return } // 如果配置了自動(dòng)打開瀏覽器，且不是測(cè)試環(huán)境，則自動(dòng)打開瀏覽器并跳到我們的開發(fā)地址 if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {  opn(uri) }})