webpack压缩图片

        Hello，大家好啊！我是聪明的墨菲特 (o.O)? ！今天和大家分享在使用webpac高级部分——图片压缩。

        引用了大量本地图片进行页面渲染的项目，项目内图片不做压缩处理打包后项目体积会过大！（注意：如果项目中图片地址引用的是外部地址，就可不做压缩处理）

话不多说咱们直接开启操作步骤！

一、下载安装包

npm i image-minimizer-webpack-plugin imagemin -D

 剩下安装包有两种模式，无损压缩和有损压缩。

1.无损压缩（推荐）：压缩后图片体积稍大一点，但保持了完整

npm install --ignore-scripts imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

2.有损压缩（不推荐）： 压缩后图片体积更小一点，但不完整

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

二、配置 

在配置文件webpack.prod.js内添加如下代码

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); //本地图片压缩

主要图片压缩配置代码从第三点开始

   optimization: {//放置压缩的操作
    minimizer: [
      //1. css代码压缩（原生格式压缩为一行，注意：默认生产模式已经开启了html压缩、js压缩，不需要配置）
      new CssMinimizerPlugin(), 

      //2. js压缩
      new TerserWebpackPlugin({
        parallel: threads, //开启多进程和设置进程数量
      }),

      //3. 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },

 配置完成后尝试打包，你会发现会有以下喵的报错！别急！咱们还有后续配置进行解决~

三、报错解决

1. 下载两个exe文件：

jpegtran.exe下载地址： http://jpegclub.org/jpegtran/

optipng.exe 下载地址：https://optipng.sourceforge.net/

2. node_modules 内添加两个exe文件

jpegtran.exe复制到 node_modules\jpegtran-bin\vendor 下

optipng.exe复制到 node_modules\optipng-bin\vendor 下

添加完后就可以 npm run build 打包咯，打包完成后对比原图片你会发现“雀石小了O.o?”。