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]']
},
