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']  //意思是只对主流浏览器的最新两个版本（其实也就是不做兼容了，现代最新的浏览器基本都不需要兼容了呀）

      })

    ]

  }

}

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

  }

}