vue-loader 调用了cssLoaders方法配置了css加载器属性。

  module: {
    loaders: [     // 这里也是相应的配置，test就是匹配文件，loader是加载器，  
        {
            test: /\.vue$/,
            loader: 'vue'
        },
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            loader: 'json'
        },
       /* {
            test: /\.css$/,   //这是注释掉的模块，一开始很疑惑加入css的编译模块马上就报错了，注释掉之后sass代码照样可以成功编译。
            loader: ["vue-style-loader", "css-loader"]
        },
        {
            test: /\.less$/,
            loader: ["vue-style-loader", "css-loader", "less-loader"]
        },
        {
            test: /\.(scss|sass)$/,
            loader: ["node-sass", "vue-style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.scss/,
            loaders: ['css', 'autoprefixer', 'sass'],
        },*/
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
  },
// vue-loader 配置
  vue: {   //后面才清楚是// cssLoaders方法中已经配置了 该方法的实现在下图的 代码框中
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  //加载css配置模块
 // Autoprefixer是一个基于PostCSS的智能添加CSS前缀的插件
    postcss: [
      require('autoprefixer')({  
        browsers: ['last 2 versions']  //意思是只对主流浏览器的最新两个版本（其实也就是不做兼容了，现代最新的浏览器基本都不需要兼容了呀）
      })
    ]
  }
}

　　

1. 配置静态资源路径
2. 生成cssLoaders用于加载.vue文件中的样式
3. 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader则只配置了css加载器以及编译css之后自动添加前缀。(所以才可以直接编译.vue文件里面的sass样式)

 

上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式,具体实现如下

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = { 
    loader: 'css-loader',
    options: {  //options是loader的选项配置 
      minimize: process.env.NODE_ENV === 'production', //生成环境下压缩文件
      sourceMap: options.sourceMap  //根据参数是否生成sourceMap文件
    }
  }
  function generateLoaders (loader, loaderOptions) {  //生成loader
    var loaders = [cssLoader] // 默认是css-loader
    if (loader) { // 如果参数loader存在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, { //将loaderOptions和sourceMap组成一个对象
          sourceMap: options.sourceMap
        })
      })
    }
    if (options.extract) { // 如果传入的options存在extract且为true
      return ExtractTextPlugin.extract({  //ExtractTextPlugin分离js中引入的css文件
        use: loaders,  //处理的loader
        fallback: 'vue-style-loader' //没有被提取分离时使用的loader
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  return {  //返回css类型对应的loader组成的对象 generateLoaders()来生成loader
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}