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

图片处理

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

转载于:https://juejin.im/post/5d132c15f265da1b7f298e95