处理图片以及其他文件(完结章)
安装
npm install file-loader --save-dev
配置:
test:/.\(png|jpg|svg)$/i,
loader:'file-loader'
不管是<img src="相对路径">还是background:url(绝对路径),loader都会自动进行处理,正常填写即可
但是在组件中,我们就不能这样正常处理,我们需要使用绝对路径或者在src中这样写:<img src="${ require(../../assets/bg.png) }"
要指定打包出来的图片路径,我们可以用
{
test:/.\(png|jpg|gif|svg)$/i,
loader:'file-loader',
//五位数的哈希,.[ext]加上它自己的后缀名
query:{
name:'assets/[name]-[hash:5].[ext]'
}
}
介绍file-loader同时再说个url-loader
npm install url-loader --save-dev
这个是干什么用的呢?如果你的图片大于了指定的大小,就会交给file-loader去处理,如果很小就就会直接转成base64编码
{
test:/.\(png|jpg|gif|svg)$/i,
loader:'url-loader',
//五位数的哈希,.[ext]加上它自己的后缀名
query:{
limit:20000,//20k 指定大小
name:'assets/[name]-[hash:5].[ext]'
}
ok,我们再来说一个image-loader,是用来压缩图片的
npm install image-webpack-load --save-dev
{
test:/.\(png|jpg|gif|svg)$/i,
loaders:[
'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
'image-webpack'
]
}
完结撒花!