vue-cli的webpack模板專案配置檔案分析

阿新 • • 發佈：2019-01-27

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

二、指令分析

首先看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"
 }

測試的東西先不看，直接看”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檔案。該檔案主要完成下面幾件事情：

檢查node和npm的版本、引入相關外掛和配置
webpack對原始碼進行編譯打包並返回compiler物件
建立express伺服器
配置開發中間件（webpack-dev-middleware）和熱過載中介軟體（webpack-hot-middleware）
掛載代理服務和中介軟體
配置靜態資源
啟動伺服器監聽特定埠（8080）
自動開啟瀏覽器並開啟特定網址（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()
  }
}

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主要完成了下面這些事情：

配置webpack編譯入口
配置webpack輸出路徑和命名規則
配置模組resolve規則
配置不同型別模組的處理規則

說明： 這個配置裡面只配置了.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]')
        }
      }
    ]
  }
}

build/webpack.dev.conf.js

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

將webpack的熱過載客戶端程式碼新增到每個entry對應的應用
合併基礎的webpack配置
配置樣式檔案的處理規則，styleLoaders
配置Source Maps
配置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()
  ]
})

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
}

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'
  }
}

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()
  }
})

build/build.js

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

loading動畫
刪除目標資料夾
執行webpack構建
輸出資訊

說明： 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'
    ))
  })
})

build/webpack.prod.conf.js

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

合併基礎的webpack配置
配置樣式檔案的處理規則，styleLoaders
配置webpack的輸出
配置webpack外掛
gzip模式下的webpack外掛配置
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

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)
  }
}

四、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
  }
}

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或者部落格），感覺實際過程中更改外掛配置或者使用新外掛也是需要費點心思鑽文件和網上其他部落格介紹。

vue-cli的webpack模板專案配置檔案分析

一、檔案結構

二、指令分析

三、build資料夾分析

build/dev-server.js

build/webpack.base.conf.js

build/webpack.dev.conf.js

build/utils.js

build/vue-loader.conf.js

build/dev-client.js

build/build.js

build/webpack.prod.conf.js

build/check-versions.js

四、config資料夾分析

config/index.js

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

五、總結

vue-cli的webpack模板專案配置檔案分析

vue-cli專案配置檔案分析

vue + webpack 構建專案配置檔案小記

Sonar程式碼質量分析工具：sonar-runner 的專案配置檔案

vue.js打包生成配置檔案

ssm專案配置檔案中的包掃描bean,排除特定bean的掃描

詳解 vue-cli 的打包配置檔案程式碼

idea Maven專案配置檔案讀取不到、配置檔案讀取出現問題

c# 建立到資料來源的連線以及獲取專案配置檔案的屬性

Filebeat 原理詳解/配置檔案分析

複製專案導致另一個專案啟動專案配置檔案加載出錯，埠被佔用

Nginx轉發SpringBoot專案配置檔案：nginx.conf（實現前後端完全分離）

SpringBoot專案配置檔案：application.yml

springmvc 專案完整示例02 專案建立-eclipse建立動態web專案配置檔案 junit單元測試

Django 2.0 專案配置檔案介紹：

ABP框架（asp.net core 2.X+Vue）模板專案學習之路（一）

JavaWeb讀取專案配置檔案的方式

音訊策略配置檔案分析

Android Studio匯入太慢？修改專案配置檔案再匯入，飛一般的感覺

專案配置檔案為啥有好幾個？

vue-cli的webpack模板專案配置檔案分析

一、檔案結構

二、指令分析

三、build資料夾分析

build/dev-server.js

build/webpack.base.conf.js

build/webpack.dev.conf.js

build/utils.js

build/vue-loader.conf.js

build/dev-client.js

build/build.js

build/webpack.prod.conf.js

build/check-versions.js

四、config資料夾分析

config/index.js

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

五、總結

相關推薦