webpack(打包图片相关内容-是否对图片进行base64编码)

url-loader

• 在使用url-loader对图片进行加载处理的时候, 可以通过设置options来设置图片打包的处理结果
• limit可以用来设置对图片进行base64编码的限制
  • 默认情况下，对任何大小的图片都进行base64编码,不单独打包成一个文件
  • 可以设置以下

方法1 设置布尔值，
设置为true对所有大小的图片都编码，
设置为false默认对所有大小的图片都不进行编码

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false, ////设置为false对任何图片都不进行base64编码
            },
          },
        ],
      },
    ],
}

image.png

方法二： 设置数值
小于该数值的图片进行base64编码；大于等与该数值的图片不进行base64编码

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 0, //设置为0对任何图片都不进行base64编码
            },
          },
        ],
      },
    ],
}

方法二： 设置字符串，利用查询字符串的形式 配置loader
limit给定的值是图片的大小，单位是byte字节，如果我们引用的图片大于或等于给定的limite值，则不会被转为base64格式的字符串。如果图片小于给定的limit值，则会被转换为base64的字符串（limit目的：让大图保真，让小图压缩）;

[name]代表名称,name能够设置图片的名称跟原来一样，
[ext]代表扩展名,这里当然也可以手动该你想要图片的名称例如name=hhh.png

当然为了避免命名的重复，可以在图片名称前加一个8位的hash值，注，每一张图片的hash值都不一样hash值是32位的值，只要你指定了一个数值，就代表从32位里面截取指定前几位数量的值，这里截取的前8位

{ 
    test: /\.(jpg|png|gif|jpeg)$/, 
    use: ['url-loader?limit=11613&name=[hash:8]-[name].[ext]']
},