1.什么是urlloader
url-loader 功能类似于 file-loader,
但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL(同file-loader)
2.urlloader使用
https://www.webpackjs.com/loaders/url-loader/
2.1安装urlloader
npm install --save-dev url-loader
2.2配置urlloader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: "[name].[ext]",
outputPath: "/images",
limit: 1024
}
}
]
}
优势:
图片比较小的时候直接转换成base64字符串图片, 减少请求次数
图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片
3.配置注意点
limit:指定图片限制的大小
1.如果被打包的图片超过了限制的大小,则在打包的时候就是用file-loader将图片保存为一个文件(需安装了file-loader)
2.如果被打包的图片没有超过限制的大小,就会将图片转换为base64的字符串
3.对于比较小的图片,我们将图片转换为base64的字符串之后,可以提升网页的性能(因为减少了请求的次数)
4.对于比较大的图片,就算我们将图片转换为base64之后,也不会提升网页的性能,还有可能降低网页的性能(因为图片比较大,那么转换之后的字符串也会比较多,那么网页的体积就会变大,那么访问的速度就会变慢)