webpack学习(八) --图片处理

2,420 阅读1分钟

图片处理

前面几篇文章介绍了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属性中的文件
                            }
                        }
                    ]
                }
            ]
        }
    ]
}