面试题：Webpack中如何配置实现图片资源的基本压缩

Question

在Webpack项目里，若要对图片资源进行基本的压缩处理，应怎样配置相关的loader及插件？请简要说明配置步骤及可能用到的关键参数。

Answer 1

1. 安装相关依赖
   • 安装image - webpack - loader，它用于图片压缩。在项目根目录下运行npm install image - webpack - loader --save - dev。
2. 配置webpack.config.js
   • 在module.rules数组中添加如下配置：

   {
       test: /\.(png|jpg|jpeg|gif)$/i,
       use: [
           {
               loader: 'image - webpack - loader',
               options: {
                   mozjpeg: {
                       progressive: true,
                       quality: 65
                   },
                   // optipng.enabled: false will disable optipng
                   optipng: {
                       enabled: false
                   },
                   pngquant: {
                       quality: [0.65, 0.90],
                       speed: 4
                   },
                   gifsicle: {
                       interlaced: false
                   },
                   // 开启webp，需要在image - webpack - loader v6.0.0及以上版本
                   webp: {
                       quality: 75
                   }
               }
           }
       ]
   }
   

   • 关键参数说明：
     • mozjpeg：针对JPEG图片压缩的配置，progressive表示是否采用渐进式压缩，quality表示压缩质量，取值范围0 - 100，数值越大质量越高，文件也越大。
     • optipng：用于PNG图片优化，enabled设为false可禁用该项优化。
     • pngquant：另一种PNG图片压缩方式，quality设置压缩质量范围，speed设置压缩速度，1 - 11，数值越大速度越快但压缩效果可能变差。
     • gifsicle：用于GIF图片处理，interlaced设置是否交错显示GIF图片。
     • webp：开启对WebP格式图片的支持及设置其压缩质量。