vue-cli脚手架npm相关文件解读（4）utils.js

系列文章传送门：

1、build/webpack.base.conf.js     

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.js

下面是build/utils.js中相关代码和配置的说明

项目地址：https://github.com/SmileSmith（感觉不错的话帮忙打个星哈 ~）

/*
 * npm run dev和 npm run build中可能用到的公共函数
 * 目前主要包括
 * 1、获取兼容的输出路径的函数
 * 2、cssLoader工厂函数
*/


var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// 导出assetsPath函数，调试和构建时导出文件的路径都采用这种方式的路径
exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  // path.join和path.posix.join的区别就是，后者以 posix 兼容的方式交互
  // 这里为什么用posix这样做跨平台的 posix 兼容，而读取内容的地方都没有用？？ 请大神指导
  return path.posix.join(assetsSubDirectory, _path)
}

// 导出最终读取和导入的loader，来处理对应类型的文件
exports.cssLoaders = function (options) {
  options = options || {}

  // 基础的css-loader配置
  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // webpack中loader的执行是 右-->左，因此最后的css-loader先放在数组的第一位
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, { // Object.assign是es6的方法，主要用来合并对象的，浅拷贝
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // 是否单独css是统一配置的，避免不同类型的css混乱
    // 所以这里不读取loaderOptions，而是取统一的option的extract配置
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(), // css对应 vue-style-loader, css-loader
    postcss: generateLoaders(), // postcss对应 vue-style-loader, css-loader
    less: generateLoaders('less'), // less对应 vue-style-loader, less-loader
    sass: generateLoaders('sass', { indentedSyntax: true }), // sass对应 vue-style-loader, sass-loader
    scss: generateLoaders('sass'), // scss对应 vue-style-loader, sass-loader
    stylus: generateLoaders('stylus'), // stylus对应 vue-style-loader, stylus-loader
    styl: generateLoaders('stylus') // styl对应 vue-style-loader, styl-loader
  }
}

// Generate loaders for standalone style files (outside of .vue)
// 处理import这种方式导入的文件类型的打包，上面的exports.cssLoaders为这一步服务
// 注意.VUE文件不用这个，用vue-loader.config中的配置
exports.styleLoaders = function (options) {
  var output = []
  // 生成的各种css文件的loader对象
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp('\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

参考：http://www.cnblogs.com/ye-hcj/archive/2017/06.html