vue-cli的webpack模板項目配置文件分析

2017-09-11更新：更新到webpack 2.6.1所對應的配置，完善部分代碼註釋。

由於最近在vue-cli生成的webpack模板項目的基礎上寫一個小東西，開發過程中需要改動到build和config裏面一些相關的配置，所以剛好趁此機會將所有配置文件看一遍，理一理思路，也便於以後修改配置的時候不會“太折騰”。

一、文件結構

本文主要分析開發（dev）和構建（build）兩個過程涉及到的文件，故下面文件結構僅列出相應的內容。

├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

二、指令分析

首先看package.json裏面的scripts字段，

"scripts": {
  "dev": "node build/dev-server.js",
  "build": "node build/build.js",
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

測試的東西先不看，直接看”dev”和”build”。運行”npm run dev”的時候執行的是build/dev-server.js文件，運行”npm run build”的時候執行的是build/build.js文件，我們可以從這兩個文件開始進行代碼閱讀分析。

三、build文件夾分析

build/dev-server.js

首先來看執行”npm run dev”時候最先執行的build/dev-server.js文件。該文件主要完成下面幾件事情：

1. 檢查node和npm的版本、引入相關插件和配置
2. webpack對源碼進行編譯打包並返回compiler對象
3. 創建express服務器
4. 配置開發中間件（webpack-dev-middleware）和熱重載中間件（webpack-hot-middleware）
5. 掛載代理服務和中間件
6. 配置靜態資源
7. 啓動服務器監聽特定端口（8080）
8. 自動打開瀏覽器並打開特定網址（localhost:8080）

說明： express服務器提供靜態文件服務，不過它還使用了http-proxy-middleware，一個http請求代理的中間件。前端開發過程中需要使用到後臺的API的話，可以通過配置proxyTable來將相應的後臺請求代理到專用的API服務器。

詳情請看代碼註釋：

// 檢查NodeJS和npm的版本
require('./check-versions')()

// 獲取基本配置
var config = require('../config')
// 如果Node的環境變量中沒有設置當前的環境（NODE_ENV），則使用config中的dev環境配置作爲當前的環境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// opn是一個可以調用默認軟件打開網址、圖片、文件等內容的插件
// 這裏用它來調用默認瀏覽器打開dev-server監聽的端口，例如：localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
// http-proxy-middleware是一個express中間件，用於將http請求代理到其他服務器
// 例：localhost:8080/api/xxx  -->  localhost:3000/api/xxx
// 這裏使用該插件可以將前端開發中涉及到的請求代理到提供服務的後臺服務器上，方便與服務器對接
var proxyMiddleware = require('http-proxy-middleware')
// 開發環境下的webpack配置
var webpackConfig = require('./webpack.dev.conf')

// dev-server 監聽的端口，如果沒有在命令行傳入端口號，則使用config.dev.port設置的端口，例如8080
var port = process.env.PORT || config.dev.port
// 用於判斷是否要自動打開瀏覽器的布爾變量，當配置文件中沒有設置自動打開瀏覽器的時候其值爲 false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// HTTP代理表，指定規則，將某些API請求代理到相應的服務器
var proxyTable = config.dev.proxyTable
// 創建express服務器
var app = express()
// webpack根據配置開始編譯打包源碼並返回compiler對象
var compiler = webpack(webpackConfig)
// webpack-dev-middleware將webpack編譯打包後得到的產品文件存放在內存中而沒有寫進磁盤
// 將這個中間件掛到express上使用之後即可提供這些編譯後的產品文件服務
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath, // 設置訪問路徑爲webpack配置中的output裏面所對應的路徑
  quiet: true // 設置爲true，使其不要在控制檯輸出日誌
})
// webpack-hot-middleware，用於實現熱重載功能的中間件
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: false, // 關閉控制檯的日誌輸出
  heartbeat: 2000 // 發送心跳包的頻率
})
// webpack(重新)編譯打包完成後並將js、css等文件inject到html文件之後，通過熱重載中間件強制頁面刷新
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// 根據 proxyTable 中的代理請求配置來設置express服務器的http代理規則
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  // 格式化options，例如將'www.example.com'變成{ target: 'www.example.com' }
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 重定向不存在的URL，用於支持SPA（單頁應用）
// 例如使用vue-router並開啓了history模式
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// 掛載webpack-dev-middleware中間件，提供webpack編譯打包後的產品文件服務
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 掛載熱重載中間件
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'))

// 訪問鏈接
var uri = 'http://localhost:' + port

// 創建promise，在應用服務啓動之後resolve
// 便於外部文件require了這個dev-server之後的代碼編寫
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
// webpack-dev-middleware等待webpack完成所有編譯打包之後輸出提示語到控制檯，表明服務正式啓動
// 服務正式啓動才自動打開瀏覽器進入頁面
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()
})

// 啓動express服務器並監聽相應的端口
var server = app.listen(port)

// 暴露本模塊的功能給外部使用，例如下面這種用法
// var devServer = require('./build/dev-server')
// devServer.ready.then(() => {...})
// if (...) { devServer.close() }
module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116

build/webpack.base.conf.js

從代碼中看到，dev-server使用的webpack配置來自build/webpack.dev.conf.js文件（測試環境下使用的是build/webpack.prod.conf.js，這裏暫時不考慮測試環境）。而build/webpack.dev.conf.js中又引用了webpack.base.conf.js，所以這裏我先分析webpack.base.conf.js。

webpack.base.conf.js主要完成了下面這些事情：

1. 配置webpack編譯入口
2. 配置webpack輸出路徑和命名規則
3. 配置模塊resolve規則
4. 配置不同類型模塊的處理規則

說明： 這個配置裏面只配置了.js、.vue、圖片、字體等幾類文件的處理規則，如果需要處理其他文件可以在module.rules裏面另行配置。

具體請看代碼註釋：

var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

// 獲取絕對路徑
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  // webpack入口文件
  entry: {
    app: './src/main.js'
  },
  // webpack輸出路徑和命名規則
  output: {
    // webpack輸出的目標文件夾路徑（例如：/dist）
    path: config.build.assetsRoot,
    // webpack輸出bundle文件命名格式
    filename: '[name].js',
    // webpack編譯輸出的發佈路徑（例如'//cdn.xxx.com/app/'）
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  // 模塊resolve的規則
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    // 別名，方便引用模塊，例如有了別名之後，
    // import Vue from 'vue/dist/vue.common.js'可以寫成 import Vue from 'vue'
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    },
    symlinks: false
  },
  // 不同類型模塊的處理規則
  module: {
    rules: [
      {// 對src和test文件夾下的.js和.vue文件使用eslint-loader進行代碼規範檢查
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {// 對所有.vue文件使用vue-loader進行編譯
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {// 對src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉成es5
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {// 對圖片資源文件使用url-loader
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小於10K的圖片轉成base64編碼的dataURL字符串寫到代碼中
          limit: 10000,
          // 其他的圖片轉移到靜態資源文件夾
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {// 對多媒體資源文件使用url-loader
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小於10K的資源轉成base64編碼的dataURL字符串寫到代碼中
          limit: 10000,
          // 其他的資源轉移到靜態資源文件夾
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {// 對字體資源文件使用url-loader
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小於10K的資源轉成base64編碼的dataURL字符串寫到代碼中
          limit: 10000,
          // 其他的資源轉移到靜態資源文件夾
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93

build/webpack.dev.conf.js

接下來看webpack.dev.conf.js，這裏面在webpack.base.conf的基礎上增加完善了開發環境下面的配置，主要包括下面幾件事情：

1. 將webpack的熱重載客戶端代碼添加到每個entry對應的應用
2. 合併基礎的webpack配置
3. 配置樣式文件的處理規則，styleLoaders
4. 配置Source Maps
5. 配置webpack插件

詳情請看代碼註釋：

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
// webpack-merge是一個可以合併數組和對象的插件
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// html-webpack-plugin用於將webpack編譯打包後的產品文件注入到html模板中
// 即自動在index.html裏面加上<link>和<script>標籤引用webpack打包後的文件
var HtmlWebpackPlugin = require('html-webpack-plugin')
// friendly-errors-webpack-plugin用於更友好地輸出webpack的警告、錯誤等信息
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
// 給每個入口頁面(應用)加上dev-client，用於跟dev-server的熱重載插件通信，實現熱更新
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    // 樣式文件的處理規則，對css/sass/scss等不同內容使用相應的styleLoaders
    // 由utils配置出各種類型的預處理語言所需要使用的loader，例如sass需要使用sass-loader
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  // 使用這種source-map更快
  devtool: '#cheap-module-eval-source-map',
  // webpack插件
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // 開啓webpack熱更新功能
    new webpack.HotModuleReplacementPlugin(),
    // webpack編譯過程中出錯的時候跳過報錯階段，不會阻塞編譯，在編譯結束後報錯
    new webpack.NoEmitOnErrorsPlugin(),
    // 自動將依賴注入html模板，並輸出最終的html文件到目標文件夾
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46

build/utils.js

utils提供工具函數，包括生成處理各種樣式語言的loader，獲取資源文件存放路徑的工具函數。 
1. 計算資源文件存放路徑 
2. 生成cssLoaders用於加載.vue文件中的樣式 
3. 生成styleLoaders用於加載不在.vue文件中的單獨存在的樣式文件

var path = require('path')
var config = require('../config')
// extract-text-webpack-plugin可以提取bundle中的特定文本，將提取後的文本單獨存放到另外的文件
// 這裏用來提取css樣式
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// 資源文件的存放路徑
exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

// 生成css、sass、scss等各種用來編寫樣式的語言所對應的loader配置
exports.cssLoaders = function (options) {
  options = options || {}
  // css-loader配置
  var cssLoader = {
    loader: 'css-loader',
    options: {
      // 是否最小化
      minimize: process.env.NODE_ENV === 'production',
      // 是否使用source-map
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  // 生成各種loader配置，並且配置了extract-text-pulgin
  function generateLoaders (loader, loaderOptions) {
    // 默認是css-loader
    var loaders = [cssLoader]
    // 如果非css，則增加一個處理預編譯語言的loader並設好相關配置屬性
    // 例如generateLoaders('less')，這裏就會push一個less-loader
    // less-loader先將less編譯成css，然後再由css-loader去處理css
    // 其他sass、scss等語言也是一樣的過程
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      // 配置extract-text-plugin提取樣式
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      // 無需提取樣式則簡單使用vue-style-loader配合各種樣式loader去處理<style>裏面的樣式
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  // 得到各種不同處理樣式的語言所對應的loader
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
// 生成處理單獨的.css、.sass、.scss等樣式文件的規則
exports.styleLoaders = function (options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87

build/vue-loader.conf.js

vue-loader.conf的配置比較簡單，詳情請看代碼註釋：

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // 處理.vue文件中的樣式
  loaders: utils.cssLoaders({
    // 是否打開source-map
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    // 是否提取樣式到單獨的文件
    extract: isProduction
  }),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

build/dev-client.js

dev-client.js裏面主要寫了瀏覽器端代碼，用於實現webpack的熱更新。

/* eslint-disable */
// 實現瀏覽器端的EventSource，用於跟服務器雙向通信
// webpack熱重載客戶端跟dev-server上的熱重載插件之間需要進行雙向通信
// 服務端webpack重新編譯後，會向客戶端推送信息，告訴客戶端進行更新
require('eventsource-polyfill')
// webpack熱重載客戶端
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

// 客戶端收到更新動作，執行頁面刷新
hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

build/build.js

講完了開發環境下的配置，下面開始來看構建環境下的配置。執行”npm run build”的時候首先執行的是build/build.js文件，build.js主要完成下面幾件事：

1. loading動畫
2. 刪除目標文件夾
3. 執行webpack構建
4. 輸出信息

說明： webpack編譯之後會輸出到配置裏面指定的目標文件夾；刪除目標文件夾之後再創建是爲了去除舊的內容，以免產生不可預測的影響。

詳情請看代碼註釋：

// 檢查NodeJS和npm的版本
require('./check-versions')()

process.env.NODE_ENV = 'production'

// ora，一個可以在終端顯示spinner的插件
var ora = require('ora')
// rm，用於刪除文件或文件夾的插件
var rm = require('rimraf')
var path = require('path')
// chalk，用於在控制檯輸出帶顏色字體的插件
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start() // 開啓loading動畫

// 首先將整個dist文件夾以及裏面的內容刪除，以免遺留舊的沒用的文件
// 刪除完成後纔開始webpack構建打包
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  // 執行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
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47

build/webpack.prod.conf.js

構建的時候用到的webpack配置來自webpack.prod.conf.js，該配置同樣是在webpack.base.conf基礎上的進一步完善。主要完成下面幾件事情：

1. 合併基礎的webpack配置
2. 配置樣式文件的處理規則，styleLoaders
3. 配置webpack的輸出
4. 配置webpack插件
5. gzip模式下的webpack插件配置
6. webpack-bundle分析

說明： webpack插件裏面多了醜化壓縮代碼以及抽離css文件等插件。

詳情請看代碼：

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// copy-webpack-plugin，用於將static中的靜態文件複製到產品文件夾dist
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// optimize-css-assets-webpack-plugin，用於優化和最小化css資源
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    // 樣式文件的處理規則，對css/sass/scss等不同內容使用相應的styleLoaders
    // 由utils配置出各種類型的預處理語言所需要使用的loader，例如sass需要使用sass-loader
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // 是否使用source-map
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  // webpack輸出路徑和命名規則
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  // webpack插件
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // 醜化壓縮JS代碼
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    // 將css提取到單獨的文件
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    // 優化、最小化css代碼，如果只簡單使用extract-text-plugin可能會造成css重複
    // 具體原因可以看npm上面optimize-css-assets-webpack-plugin的介紹
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // 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
    // 將產品文件的引用注入到index.html
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        // 刪除index.html中的註釋
        removeComments: true,
        // 刪除index.html中的空格
        collapseWhitespace: true,
        // 刪除各種html標籤屬性值的雙引號
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // 注入依賴的時候按照依賴先後順序進行注入，比如，需要先注入vendor.js，再注入app.js
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // split vendor js into its own file
    // 將所有從node_modules中引入的js提取到vendor.js，即抽取庫文件
    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
    // 從vendor中提取出manifest，原因如上
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    // 將static文件夾裏面的靜態資源複製到dist/static
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

// 如果開啓了產品gzip壓縮，則利用插件將構建後的產品文件進行壓縮
if (config.build.productionGzip) {
  // 一個用於壓縮的webpack插件
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      // 壓縮算法
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

// 如果啓動了report，則通過插件給出webpack構建打包後的產品文件分析報告
if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145

build/check-versions.js

最後是build文件夾下的check-version.js，它完成對node和npm的版本檢測，下面是其代碼註釋：

// chalk, 用於在控制檯輸出帶顏色字體的插件
var chalk = require('chalk')
// semver, 語義化版本檢查插件（The semantic version parser used by npm）
var semver = require('semver')
var packageConfig = require('../package.json')
// shelljs, 執行Unix命令行的插件
var shell = require('shelljs')
// 開闢子進程執行指令cmd並返回結果
function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

// node和npm版本需求
var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  var warnings = []
  // 依次判斷版本是否符合要求
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }
  // 如果有警告則將其輸出到控制檯
  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()
    for (var i = 0; i < warnings.length; i++) {
      var warning = warnings[i]
      console.log('  ' + warning)
    }
    console.log()
    process.exit(1)
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54

四、config文件夾分析

config/index.js

config文件夾下最主要的文件就是index.js了，在這裏面描述了開發和構建兩種環境下的配置，前面的build文件夾下也有不少文件引用了index.js裏面的配置。下面是代碼註釋：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  // 構建產品時使用的配置
  build: {
    // 環境變量
    env: require('./prod.env'),
    // html入口文件
    index: path.resolve(__dirname, '../dist/index.html'),
    // 產品文件的存放路徑
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 二級目錄，存放靜態資源文件的目錄，位於dist文件夾下
    assetsSubDirectory: 'static',
    // 發佈路徑，如果構建後的產品文件有用於發佈CDN或者放到其他域名的服務器，可以在這裏進行設置
    // 設置之後構建的產品文件在注入到index.html中的時候就會帶上這裏的發佈路徑
    assetsPublicPath: '/',
    // 是否使用source-map
    productionSourceMap: true,
    // 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
    // 是否開啓gzip壓縮
    productionGzip: false,
    // gzip模式下需要壓縮的文件的擴展名，設置js、css之後就只會對js和css文件進行壓縮
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    // 是否展示webpack構建打包之後的分析報告
    bundleAnalyzerReport: process.env.npm_config_report
  },
  // 開發過程中使用的配置
  dev: {
    // 環境變量
    env: require('./dev.env'),
    // dev-server監聽的端口
    port: 8080,
    // 是否自動打開瀏覽器
    autoOpenBrowser: true,
    // 靜態資源文件夾
    assetsSubDirectory: 'static',
    // 發佈路徑
    assetsPublicPath: '/',
    // 代理配置表，在這裏可以配置特定的請求代理到對應的API接口
    // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    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
    cssSourceMap: false
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58

config/dev.env.js、config/prod.env.js和config/test.env.js

這三個文件就簡單設置了環境變量而已，沒什麼特別的。

五、總結

到這裏對模板項目的build和config文件夾下面的內容已經基本瞭解，知道了在實際使用中根據自己的需求修改哪裏的配置，例如，當我有需要配置代理的時候要在config/index.js裏面的dev.proxyTable設置，當我修改了資源文件夾名稱static同樣需要在config/index.js裏面設置。webpack的插件好多，在看代碼的過程中遇到不認識的插件都是要去查看很多文檔（github，npm或者博客），感覺實際過程中更改插件配置或者使用新插件也是需要費點心思鑽文檔和網上其他博客介紹。