webpack5图片压缩-image-webpack-loader插件

一，常规webpack打包的配置

我们通常会设置大图片打包出来，小图片转成base64的形式进行webpack进行打包。
具体设置见这篇文章的第七节：https://blog.csdn.net/weixin_42349568/article/details/124370794
现在有个项目就是这样配置的，想要先将图片进行压缩，然后再执行这个打包策略。

二，安装image-webpack-loader

这个插件不能用npm库安装，而必须使用cnpm安装

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install image-webpack-loader -D

三，修改webpack配置

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
        type: 'asset', // asset 资源类型可以根据指定的图片大小来判断是否需要将图片转化为 base64
        generator: {
          filename: 'img/[hash][ext][query]' // 局部指定输出位置
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 限制于 8kb
          }
        },
          // 图片压缩的配置
        use: [
          // image-webpack-loader需要用cnpm安装否则容易报错
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      },

实现的效果：

四，缺点及解决

因为这个插件是必须cnpm下载，否则会报错。所以，可以不使用这个插件。
由于使用image-webpack-loader，安装不友好且容易报错，在CI/CD环境打包时只能使用npm安装依赖包。我还是比较推荐使用 tinypng 一个在线压图的网站手动压缩项目图片。