图片处理
前面几篇文章介绍了webpack处理js、css,接下来这篇文章将学习webpack最后一个需要处理的文件--图片的处理
案例说话
- 项目中有一个css文件index.css
- 在index.css中有一个引入背景图片的样式
未做图片处理
- 执行webpack,会发现打包报错,解析当前png格式失败
如何做图片处理
- 图片处理可以依赖三个loader,分别为file-loader、url-loader,img-loader
file-loader:图片打包。
url-loader:与file-loader功能相同且多了可以根据图片大小判断是否打包成base64编码格式功能。个人认为url-loader更适用一些。
img-loader:将图片进行压缩。
- 在webpack.config.js文件中写入配置
module:{
rules:[
{
test:/\.(jpg|png|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
name:'[name][hash:5].[ext]',
//限制图片大小,如<=100kb,就进行base64编码,若>100kb,就会打包出来
limit:100000,
outputPath:'img' //输出路径
}
},
{
loader:'img-loader',
option:{
plugins:[
require('imagemin-pngquant')({ //imagemin-pngquant需要npm安装
quality:[0.3,0.5] // 范围0-1,0为压缩最少,1为压缩最完美的
})
]
}
}
]
}
]
}
若小于设置的limit数,则打包出来的为base64编码
若大于设置的limit数,则打包出来的为设置的outputPath文件夹中将index.html中的图片做处理
上述我们讲得都是css文件中的图片,当我们在入口文件中引入一个img的时候,执行webpack打包,会发现报错,找不到该图片
因为index.html文件也会打包进dist文件中,而index.html中的文件没做处理,所以打包之后也没做处理,依然引的之前的路径,这时候就需要一个html- loader来解决问题,在html中遇到什么属性的值,要做什么样的处理,都可以用该loader解决
module:{
rules:[
{
test:/\.(jpg|png|jpeg|gif)$/,
use:[
{
test:/\.html$/,
use:[
{
loader:'html-loader',
options:{
attrs:['img:src'] //用html-loader来处理所有img标签中src属性中的文件
}
}
]
}
]
}
]
}