webpack配置自动压缩图片

手动压缩图片

图片压缩是很重要的前端优化，一般可以选择手动压缩
手动压缩网站

webpack压缩图片

这里记录借助webpack的image-webpack-loader实现自动压缩图片

项目是create-react-app搭建的，webpack@5.64.4

1、安装相应loader

npm i image-webpack-loader --save-dev

2、webpack相关配置

webpack@5.x

	const imageInlineSizeLimit = parseInt(
	  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
	);
1
2
3

 {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              type: 'asset',
              parser: {
                dataUrlCondition: {
                  maxSize: imageInlineSizeLimit,
                },
              },
              use: [
                {
                  loader: 'image-webpack-loader',
                  options: {
                    mozjpeg: {
                      progressive: true,
                      quality: 50
                    },
                    optipng: {
                      enabled: false,
                    },
                    pngquant: {
                      quality: [0.5, 0.65],
                      speed: 4
                    },
                    gifsicle: {
                      interlaced: false,
                    },
                    //ios不支持
                    // webp: {
                    //  quality: 100
                    // }
                  }
                }
              ],
            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Webpack5 已经将file-loader和url-loader两个 Loader 功能内置到 Webpack 里了，所以只需要配置 type: "asset"即可处理图片资源

webpack@4.x
webpack4 需要配置file-loader

  {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[hash:7].[ext]",
              outputPath: "img",
            },
          },
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true, 
                quality: 60, // JPG 输出的质量 一般60为可接受的
              },
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.5, 0.65], // PNG 质量范围
                speed: 4,
              },
              gifsicle: {
                interlaced: false,// 优化GIF
              },
              webp: {
                quality: 75, // 转换为 webp
              },
            },
          },
        ],
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

实践踩坑

我的项目是webpack@5.x，node@14.19.1，npm安装image-webpack-loader后一直报错
解决方法：切换node版本node@16.14.2，删除image-webpack-loader后重新安装

效果

使用前 0.99 MB
使用后 205 KB