webpack4系列教程，如何压缩图片文件?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

背景叙述

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

• https://newsn.net/say/webpack-video.html

<img src="<%= require('../src/bg2.png')%>">

• https://newsn.net/say/webpack-url-loader.html

{
    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，官方地址如下：

• https://github.com/tcoopman/image-webpack-loader

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

安装命令是：

npm i image-webpack-loader -D

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

配置项目

image-webpack-loader和url-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中的参数，是从官方文档里面抄过来的，大家可以根据自己的需要修改。具体请参考官方文档。

结果展示

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

相关链接

• https://newsn.net/say/webpack-url-loader.html
• https://newsn.net/say/pngquant-compress.html
• https://newsn.net/say/cnpm-registry.html

总结

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

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。