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