苏南大叔在这里案例一下,图片压缩的事情。当然,网页图片压缩这件事情,也不是非要弄到webpack里面进行操作。自己使用自己喜欢的工具,进行操作都是可以的。比如:苏南大叔觉得很不错的pngquant小工具,就是很好用的,链接见文末。

苏南大叔:webpack4系列教程,如何压缩图片文件? - webpack-image-hero
webpack4系列教程,如何压缩图片文件?(图4-1)

本文的涉及到的loaderimage-webpack-loader,因为涉及到各种loader冲突问题,本方案也不是特别完美。大家看着操作吧。测试环境:win10nodejs@12.19.0webpack@4.41.12image-webpack-loader@7.0.1url-loader@4.1.0

背景叙述

这里先说一下使用webpack处理图片时,苏南大叔的已有结论。
结论是:css中的图片使用url-loader处理,然后html中的图片,结合HtmlWebpackPlugin使用require语句处理(同样需要url-loader之类的去处理图片地址)。例子如下:

<img src="<%= require('../src/bg2.png')%>">
{
    test:/\.(png|jpg|gif|jpeg|svg)$/,
    use:[
        {
            loader: "url-loader",
            options: {
                name: "[name].[hash:5].[ext]",
                limit: 1024, // size <= 1kib
                outputPath: "img",
                publicPath: "../img/"
            }
        }
    ]
},

image-webpack-loader

本文的主要任务是:对图片进行压缩处理,主角是image-webpack-loader,官方地址如下:

image-webpack-loader集成了如下几个图片处理工具:gifsicle,mozjpeg,optipng,pngquant,svgo,webp。当然,在安装的时候,部分操作系统下,可能需要单独安装对应的小工具。具体可以查看官方文档。

安装命令是:

npm i image-webpack-loader -D
这里有个小小插曲,就是不使用npm,而使用cnpm。一直安装image-webpack-loader失败的,请试试cnpm

苏南大叔:webpack4系列教程,如何压缩图片文件? - cnpm-install
webpack4系列教程,如何压缩图片文件?(图4-2)

配置项目

image-webpack-loaderurl-loader联动的基本配置项内容,如下所示:

{
    test: /\.(png|jpg|gif|jpeg|svg)$/,
    use: [{
        loader: "url-loader",
        options: {
            name: "[name].[hash:5].[ext]",
            limit: 3*1024, // size <= 1kib
            outputPath: "img",
            esModule: false
        }
    }, {
        loader: 'image-webpack-loader',
        options: {
            mozjpeg: {
                progressive: true,
            },
            // optipng.enabled: false will disable optipng
            optipng: {
                enabled: false,
            },
            pngquant: {
                quality: [0.65, 0.90],
                speed: 4
            },
            gifsicle: {
                interlaced: false,
            },
            // the webp option will enable WEBP
            webp: {
                quality: 75
            }
        }
    }]
},
  • url-loader对于大于limit设定的图片,采用file-loader进行处理,而小于等于limit设定的图片,采用base64处理。
  • 本文实验中配合image-webpack-loader的是url-loader,而不是推荐的file-loader。目前来看,没有任何的冲突问题。
  • 配置文件中,对于图片文件的处理,使用了两个loader,请注意其配置的先后顺序。image-webpack-loader中的参数,是从官方文档里面抄过来的,大家可以根据自己的需要修改。具体请参考官方文档。

苏南大叔:webpack4系列教程,如何压缩图片文件? - config-file
webpack4系列教程,如何压缩图片文件?(图4-3)

结果展示

在苏南大叔的实验中,一个16kb的图片,压缩后是6kb。效果还是不错的。同时,url-loaderlimit参数也是生效的。这里,不做赘述。

苏南大叔:webpack4系列教程,如何压缩图片文件? - webpack-image-result
webpack4系列教程,如何压缩图片文件?(图4-4)

相关链接

总结

实践一下,然后把感受写下来,这就是经验总结。也可以时刻提醒自己:“我是谁,我做了什么”。不知道, 广大读者,是否同意我的观点呢?

更多webpack系列教程,请点击苏南大叔的系列文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: