vue-cli#2.0 webpack 配置分析

02-10

滴滴公共前端團隊 - 王宏宇

前言

作為 Vue 的使用者我們對於 vue-cli 都很熟悉，但是對它的 webpack 配置我們可能關注甚少，今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析

vue-cli 的簡介、安裝我們不在這裡贅述，對它還不熟悉的同學可以直接訪問 vue-cli 查看

目錄結構

.├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config│ ├── dev.env.js│ ├── index.js│ └── prod.env.js├── index.html├── package.json├── src│ ├── App.vue│ ├── assets│ │ └── logo.png│ ├── components│ │ └── Hello.vue│ └── main.js└── static

本篇文章的主要關注點在

build - 編譯任務的代碼
config - webpack 的配置文件
package.json - 項目的基本信息

入口

從 package.json 中我們可以看到

"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src"}

當我們執行 npm run dev / npm run build 時運行的是 node build/dev-server.js 或 node build/build.js

dev-server.js

讓我們先從 build/dev-server.js 入手

require(./check-versions)() // 檢查 Node 和 npm 版本var config = require(../config) // 獲取 config/index.js 的默認配置/* ** 如果 Node 的環境無法判斷當前是 dev / product 環境** 使用 config.dev.env.NODE_ENV 作為當前的環境*/if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)var path = require(path) // 使用 NodeJS 自帶的文件路徑工具var express = require(express) // 使用 expressvar webpack = require(webpack) // 使用 webpackvar opn = require(opn) // 一個可以強制打開瀏覽器並跳轉到指定 url 的插件var proxyMiddleware = require(http-proxy-middleware) // 使用 proxyTable var webpackConfig = require(./webpack.dev.conf) // 使用 dev 環境的 webpack 配置// default port where dev server listens for incoming traffic/* 如果沒有指定運行埠，使用 config.dev.port 作為運行埠 */var port = process.env.PORT || config.dev.port// Define HTTP proxies to your custom API backend// https://github.com/chimurai/http-proxy-middleware/* 使用 config.dev.proxyTable 的配置作為 proxyTable 的代理配置 */var proxyTable = config.dev.proxyTable/* 使用 express 啟動一個服務 */var app = express()var compiler = webpack(webpackConfig) // 啟動 webpack 進行編譯/* 啟動 webpack-dev-middleware，將編譯後的文件暫存到內存中 */var devMiddleware = require(webpack-dev-middleware)(compiler, { publicPath: webpackConfig.output.publicPath, stats: { colors: true, chunks: false }})/* 啟動 webpack-hot-middleware，也就是我們常說的 Hot-reload */var hotMiddleware = require(webpack-hot-middleware)(compiler)// force page reload when html-webpack-plugin template changescompiler.plugin(compilation, function (compilation) { compilation.plugin(html-webpack-plugin-after-emit, function (data, cb) { hotMiddleware.publish({ action: reload }) cb() })})// proxy api requests// 將 proxyTable 中的請求配置掛在到啟動的 express 服務上Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === string) { options = { target: options } } app.use(proxyMiddleware(context, options))})// handle fallback for HTML5 history API// 使用 connect-history-api-fallback 匹配資源，如果不匹配就可以重定向到指定地址app.use(require(connect-history-api-fallback)())// serve webpack bundle output// 將暫存到內存中的 webpack 編譯後的文件掛在到 express 服務上app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 將 Hot-reload 掛在到 express 服務上app.use(hotMiddleware)// serve pure static assets// 拼接 static 文件夾的靜態資源路徑var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)// 為靜態資源提供響應服務app.use(staticPath, express.static(./static))// 讓我們這個 express 服務監聽 port 的請求，並且將此服務作為 dev-server.js 的介面暴露module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } var uri = http://localhost: + port console.log(Listening at + uri + ) // when env is testing, dont need open it // 如果不是測試環境，自動打開瀏覽器並跳到我們的開發地址 if (process.env.NODE_ENV !== testing) { opn(uri) }})

webpack.dev.conf.js

剛剛我們在 dev-server.js 中用到了 webpack.dev.conf.js 和 index.js，我們先來看一下 webpack.dev.conf.js

var config = require(../config) // 同樣的使用了 config/index.jsvar webpack = require(webpack) // 使用 webpackvar merge = require(webpack-merge) // 使用 webpack 配置合併插件var utils = require(./utils) // 使用一些小工具var baseWebpackConfig = require(./webpack.base.conf) // 載入 webpack.base.conf/* 使用 html-webpack-plugin 插件，這個插件可以幫我們自動生成 html 並且注入到 .html 文件中 */var HtmlWebpackPlugin = require(html-webpack-plugin) // add hot-reload related code to entry chunks// 將 Hol-reload 相對路徑添加到 webpack.base.conf 的對應 entry 前Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = [./build/dev-client].concat(baseWebpackConfig.entry[name])})/* 將我們 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置合併 */module.exports = merge(baseWebpackConfig, { module: { // 使用 styleLoaders loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development // 使用 #eval-source-map 模式作為開發工具，此配置可參考 DDFE 往期文章詳細了解 devtool: #eval-source-map, plugins: [ /* definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串 */ new webpack.DefinePlugin({ process.env: config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.optimize.OccurenceOrderPlugin(), /* HotModule 插件在頁面進行變更的時候只會重回對應的頁面模塊，不會重繪整個 html 文件 */ new webpack.HotModuleReplacementPlugin(), /* 使用了 NoErrorsPlugin 後頁面中的報錯不會阻塞，但是會在編譯結束後報錯 */ new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin /* 將 index.html 作為入口，注入 html 代碼後生成 index.html文件 */ new HtmlWebpackPlugin({ filename: index.html, template: index.html, inject: true }) ]})

webpack.base.conf.js

我們看到在 webpack.dev.conf.js 中又引入了 webpack.base.conf.js，它看起來很重要的樣子，所以我們只能在下一章來看看 config/index.js 了（攤手）

var path = require(path) // 使用 NodeJS 自帶的文件路徑插件var config = require(../config) // 引入 config/index.jsvar utils = require(./utils) // 引入一些小工具var projectRoot = path.resolve(__dirname, ../) // 拼接我們的工作區路徑為一個絕對路徑/* 將 NodeJS 環境作為我們的編譯環境 */var env = process.env.NODE_ENV// check env & config/index.js to decide weither to enable CSS Sourcemaps for the// various preprocessor loaders added to vue-loader at the end of this file/* 是否在 dev 環境下開啟 cssSourceMap ，在 config/index.js 中可配置 */var cssSourceMapDev = (env === development && config.dev.cssSourceMap)/* 是否在 production 環境下開啟 cssSourceMap ，在 config/index.js 中可配置 */var cssSourceMapProd = (env === production && config.build.productionSourceMap)/* 最終是否使用 cssSourceMap */var useCssSourceMap = cssSourceMapDev || cssSourceMapProdmodule.exports = { entry: { app: ./src/main.js // 編譯文件入口 }, output: { path: config.build.assetsRoot, // 編譯輸出的靜態資源根路徑 publicPath: process.env.NODE_ENV === production ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // 正式發布環境下編譯輸出的上線路徑的根路徑 filename: [name].js // 編譯輸出的文件名 }, resolve: { // 自動補全的擴展名 extensions: [, .js, .vue], // 不進行自動補全或處理的文件或者文件夾 fallback: [path.join(__dirname, ../node_modules)], alias: { // 默認路徑代理，例如 import Vue from vue，會自動到 vue/dist/vue.common.js中尋找 vue$: vue/dist/vue.common.js, src: path.resolve(__dirname, ../src), assets: path.resolve(__dirname, ../src/assets), components: path.resolve(__dirname, ../src/components) } }, resolveLoader: { fallback: [path.join(__dirname, ../node_modules)] }, module: { preLoaders: [ // 預處理的文件及使用的 loader { test: /.vue$/, loader: eslint, include: projectRoot, exclude: /node_modules/ }, { test: /.js$/, loader: eslint, include: projectRoot, exclude: /node_modules/ } ], loaders: [ // 需要處理的文件及使用的 loader { test: /.vue$/, loader: vue }, { test: /.js$/, loader: babel, include: projectRoot, exclude: /node_modules/ }, { test: /.json$/, loader: json }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: url, query: { limit: 10000, name: utils.assetsPath(img/[name].[hash:7].[ext]) } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: url, query: { limit: 10000, name: utils.assetsPath(fonts/[name].[hash:7].[ext]) } } ] }, eslint: { // eslint 代碼檢查配置工具 formatter: require(eslint-friendly-formatter) }, vue: { // .vue 文件配置 loader 及工具 (autoprefixer) loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), postcss: [ require(autoprefixer)({ browsers: [last 2 versions] }) ] }}

config/index.js

終於分析完了 webpack.base.conf.js，來讓我們看一下 config/index.js

index.js 中有 dev 和 production 兩種環境的配置

// see http://vuejs-templates.github.io/webpack for documentation.// 不再重複介紹了 ...var path = require(path)module.exports = { build: { // production 環境 env: require(./prod.env), // 使用 config/prod.env.js 中定義的編譯環境 index: path.resolve(__dirname, ../dist/index.html), // 編譯輸入的 index.html 文件 assetsRoot: path.resolve(__dirname, ../dist), // 編譯輸出的靜態資源路徑 assetsSubDirectory: static, // 編譯輸出的二級目錄 assetsPublicPath: /, // 編譯發布的根目錄，可配置為資源伺服器域名或 CDN 域名 productionSourceMap: true, // 是否開啟 cssSourceMap // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, // 是否開啟 gzip productionGzipExtensions: [js, css] // 需要使用 gzip 壓縮的文件擴展名 }, dev: { // dev 環境 env: require(./dev.env), // 使用 config/dev.env.js 中定義的編譯環境 port: 8080, // 運行測試頁面的埠 assetsSubDirectory: static, // 編譯輸出的二級目錄 assetsPublicPath: /, // 編譯發布的根目錄，可配置為資源伺服器域名或 CDN 域名 proxyTable: {}, // 需要 proxyTable 代理的介面（可跨域） // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false // 是否開啟 cssSourceMap }}

至此，我們的 npm run dev 命令就講解完畢，下面讓我們來看一看執行 npm run build 命令時發生了什麼～

build.js

// https://github.com/shelljs/shelljsrequire(./check-versions)() // 檢查 Node 和 npm 版本require(shelljs/global) // 使用了 shelljs 插件，可以讓我們在 node 環境的 js 中使用 shellenv.NODE_ENV = productionvar path = require(path) // 不再贅述var config = require(../config) // 載入 config.jsvar ora = require(ora) // 一個很好看的 loading 插件var webpack = require(webpack) // 載入 webpackvar webpackConfig = require(./webpack.prod.conf) // 載入 webpack.prod.confconsole.log( // 輸出提示信息～提示用戶請在 http 服務下查看本頁面，否則為空白頁 Tip: + Built files are meant to be served over an HTTP server. + Opening index.html over file:// won work. )var spinner = ora(building for production...) // 使用 ora 列印出 loading + logspinner.start() // 開始 loading 動畫/* 拼接編譯輸出文件路徑 */var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)/* 刪除這個文件夾（遞歸刪除） */rm(-rf, assetsPath)/* 創建此文件夾 */ mkdir(-p, assetsPath)/* 複製 static 文件夾到我們的編譯輸出目錄 */cp(-R, static/*, assetsPath)// 開始 webpack 的編譯webpack(webpackConfig, function (err, stats) { // 編譯成功的回調函數 spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + )})

webpack.prod.conf.js

var path = require(path) // 不再贅述var config = require(../config) // 載入 confi.index.jsvar utils = require(./utils) // 使用一些小工具var webpack = require(webpack) // 載入 webpackvar merge = require(webpack-merge) // 載入 webpack 配置合併工具var baseWebpackConfig = require(./webpack.base.conf) // 載入 webpack.base.conf.js/* 一個 webpack 擴展，可以提取一些代碼並且將它們和文件分離開 */ /* 如果我們想將 webpack 打包成一個文件 css js 分離開，那我們需要這個插件 */var ExtractTextPlugin = require(extract-text-webpack-plugin)/* 一個可以插入 html 並且創建新的 .html 文件的插件 */var HtmlWebpackPlugin = require(html-webpack-plugin)var env = config.build.env/* 合併 webpack.base.conf.js */var webpackConfig = merge(baseWebpackConfig, { module: { /* 使用的 loader */ loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, /* 是否使用 #source-map 開發工具，更多信息可以查看 DDFE 往期文章 */ devtool: config.build.productionSourceMap ? #source-map : false, output: { /* 編譯輸出目錄 */ path: config.build.assetsRoot, /* 編譯輸出文件名 */ filename: utils.assetsPath(js/[name].[chunkhash].js), // 我們可以在 hash 後加 :6 決定使用幾位 hash 值 // 沒有指定輸出名的文件輸出的文件名 chunkFilename: utils.assetsPath(js/[id].[chunkhash].js) }, vue: { /* 編譯 .vue 文件時使用的 loader */ loaders: utils.cssLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, plugins: [ /* 使用的插件 */ // http://vuejs.github.io/vue-loader/en/workflow/production.html /* definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串 */ new webpack.DefinePlugin({ process.env: env }), /* 壓縮 js (同樣可以壓縮 css) */ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurrenceOrderPlugin(), // extract css into its own file /* 將 css 文件分離出來 */ new ExtractTextPlugin(utils.assetsPath(css/[name].[contenthash].css)), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin /* 輸入輸出的 .html 文件 */ new HtmlWebpackPlugin({ filename: config.build.index, template: index.html, inject: true, // 是否注入 html minify: { // 壓縮的方式 removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: dependency }), // split vendor js into its own file /* 沒有指定輸出文件名的文件輸出的靜態文件名 */ new webpack.optimize.CommonsChunkPlugin({ name: vendor, minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, ../node_modules) ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated /* 沒有指定輸出文件名的文件輸出的靜態文件名 */ new webpack.optimize.CommonsChunkPlugin({ name: manifest, chunks: [vendor] }) ]})/* 開啟 gzip 的情況下使用下方的配置 */if (config.build.productionGzip) { /* 載入 compression-webpack-plugin 插件 */ var CompressionWebpackPlugin = require(compression-webpack-plugin) /* 向webpackconfig.plugins中加入下方的插件 */ webpackConfig.plugins.push( /* 使用 compression-webpack-plugin 插件進行壓縮 */ new CompressionWebpackPlugin({ asset: [path].gz[query], algorithm: gzip, test: new RegExp( \.( + config.build.productionGzipExtensions.join(|) + )$ ), threshold: 10240, minRatio: 0.8 }) )}module.exports = webpackConfig

總結

至此～我們的 vue-cli#2.0 webpack 配置分析文件就講解完畢～

對於一些插件的詳細 options 我們沒有進行講解，感興趣的同學可以去 npm 商店搜索對應插件查看 options ~

更多內容歡迎掃碼關注 DDFE 公眾號~