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
  }