webpack loader 用于对模块的源代码进行转换

url-loader

{
    test: /\.(jpg|png|gif)/,
    // url-loader默认使用es6模块化解析
     loader: "url-loader",
     options: {
         // 图片大于8kb，就会被base64处理
         limit: 8 * 1024,
         esModule: false， // 关不es6模块化解析
         encoding： true, // 默认为true, 是否使用默认编码base64，可以["utf8","utf16le","latin1","base64","hex","ascii","binary","ucs2"]
         generator： '', // 类型:{Function},默认值:() => type/subtype;encoding,base64_data,可以自定义数据编码。
         fallback: 'file-loader',  //指定当目标文件的大小超过限制时要使用的备用加载程序
         //[hash:10]取图片的hash的前10位
         //[ext]取文件原来扩展名
         name: '[hash:10].[ext]'
     }
   },

file-loader
options配置对象中，我们可以配置图片打包好之后的名称，存放的位置等。

.loader('file-loader')
.options({
  name: '[name].[contenthash].[ext]',
  outputPath: 'static/img'
})

简化后

.loader('file-loader')
.options({
  name: 'static/img/[name].[contenthash].[ext]'
})

3.sass-loader
sass-loader的作用就是将该css文件翻译成纯css语法文件，以便后续打包处理，需要注意的是，在我们需要使用sass-loader时，在安装sass-loader时还需要安装node-sass。
4.css-loader
我们的css打包文件中可能会引入其它的css文件，而css-loader的作用就相当于把这些相互依赖的css文件合并成一个css文件。

 {
      test: /.css$/,
      loader: 'css-loader',
      exclude: /(node_modules|bower_components)/
}

5.style-loader
我们需要打包的css文件在经过sass-loader的翻译，css-loader的合并之后，style-loader的作用就是把合并后的css文件挂载到页面的head中来渲染出页面的样式。
6.postcss-loader
postcss-loader是一个辅助性loader，它是针对css3中新增样式属性而存在的，它可以将css样式文件中的css3样式属性在挂载到页面上时，自动在新样式属性前添加上像-webkit-，-moz-这样的厂商前缀，但是它的使用还需要一个autoprefixer插件配合使用，我们配置postcss-loader的方式跟配置其它loader的方式一样，而引入autoprefixer插件则需要在postcss.config.js文件中引入：

 {
      test: /.css$/,
      use: ['style-loader','css-loader','postcss-loader'], //从右向左执行
}
官网的写法
rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]

7.svg-sprite-loader 将svg图片以雪碧图的方式在项目中加载