vue-cli中配置webpack系列文章三 ------ utils.js

utils.js

var path = require('path')
  var config = require('../config')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  // 設置靜態文件的公共路徑，用於修改src屬性的值（一般用於某個loader的options）
  exports.assetsPath = function (_path) {
    // 根據不一樣的環境到對公共路徑進行配置並與傳入的文件名稱進行合併
    var assetsSubDirectory = process.env.NODE_ENV === 'production'
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory
    return path.posix.join(assetsSubDirectory, _path)
  }
  // css加載器的相關配置
  exports.cssLoaders = function (options) {
    options = options || {}
    var cssLoader = {
      loader: 'css-loader',
      options: {
        // 根據不一樣的環境配置是否要對css文件進行壓縮
        minimize: process.env.NODE_ENV === 'production',
        // 根據傳入的配置決定是否生成sourceMap用於調試bug
        sourceMap: options.sourceMap
      }
    }
    // 定義名爲"generateLoaders"的函數用於配置css或css預處理器文件
    function generateLoaders (loader, loaderOptions) {
      var loaders = [cssLoader]
      // 若是有css預處理器文件（如less、sass、stylus等）
      if (loader) {
        loaders.push({
          // 使用該預處理器對應的加載器
          loader: loader + '-loader',
          // 建立一個空對象，將css加載器初始配置與該預處理器的特殊配置進行合併
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
      // 是否將入口文件（main.js）中引入的css文件一塊兒打包進該文件的css中
      // 根據傳入的options.extract的值進行判斷（通常在生產環境中會去單獨打包）
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
    }
    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }),
      scss: generateLoaders('sass'),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }
  }
  // 對.vue文件以外的css文件或css預處理器文件進行處理
  exports.styleLoaders = function (options) {
    var output = []
    var loaders = exports.cssLoaders(options)
    // 循環cssLoaders返回出來的全部文件類型
    for (var extension in loaders) {
      var loader = loaders[extension]
      // 對每個文件類型用其相對應的加載器進行處理
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      })
    }
    return output
  }