file-loader

:::info file-loader用来打包图片资源
说明：
(1) 默认情况（未添加options配置）
图片将打包到dist目录或output指定的输出目录
打包之后的文件名为随机生成的hash值
(2) 配置options
name：指定输出的文件名
[path]：代表该图片资源原始路径的目录层次，会原样输出到指定目录
[name]：原图片的文件名
[hash]：hash值，通常用来和图片文件名拼接，防止文件名的重复
[ext]：图片的后缀名
outputPath：指定输出的地址（在dist目录下） ::: 配置如下：

  1. // 下载
  2. cnpm i file-loader -D
  4. // 配置
  5. module:{
  6.   rules:[
  7.     {
  8.       test:/\.(png|jpg|gif|jepg)$/,
  9.       loader:'file-loader',
  10.       options: {
  11.           name:'[name]_[hash].[ext]',
  12.           outputPath:'images'
  13.       }
  14.     }
  15.   ]
  16. }

url-loader

:::success url-loader也可以用来打包图片
说明：
默认情况下，url-loader会以base64的方式打包图片资源。
优点：当资源文件较小的时候，可以减少http请求，优化页面加载
缺点：当资源文件较大的时候，会影响js文件的加载，造成页面响应时间增加
解决方法：通过配置options的limit属性，指定以base64打包的最大资源文件大小， 超过指定大小，即以之前的方式打包。否则，以base64的方式打包。
limit属性的单位是b（1kb = 1000b） :::

//当图片的大小小于30kb的时候，以Base64的方式打包。否则，以之前的方式打包
module:{
  rules:[
    {
      test:/\.(png|jpg|gig|jepg)$/,
      loader:'url-loader',
      options: {
          name:'[name]_[hash].[ext]',
          outputPath:'images',
          limit:30 * 1000
      }
    }
  ]
}