求问，webpack build后[webpack-cli]报错minimizerOptions有问题如何解决？

Question

webpack版本为最新5.88
如图，在加入这段代码后，运行npm run build报错

报错问题

完整代码

const path = require('path');const TerserPlugin = require("terser-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {  output: {    filename: '[name].bundle.js',    path: path.resolve(__dirname, 'dist'),  },  mode:"development",  plugins: [    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css",    }),  ],  module: {    rules: [        //打包css      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader"],      },      {        //打包图片        test: /\.(png|svg|jpg|jpeg|gif)$/i,        type: 'asset/resource',      },            // //fonts字体      // {      //   test: /\.(woff|woff2|eot|ttf|otf)$/i,      //   type: 'asset/resource',      // },          ],  },    plugins: [  // Images are converted to `webp` and the original assets have been kept  new ImageMinimizerPlugin({    test: /\.(png)$/i,    filename: "[path][name].webp",    minify: ImageMinimizerPlugin.squooshMinify,    minimizerOptions: {      targets: {        ".png": "webp",      },    },  }),    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css",    }),  ],  optimization: {    minimize: true,    minimizer: [     new TerserPlugin({        test: /\.js(\?.*)?$/i,      }),      new CssMinimizerPlugin(),    ],  },entry: {    index: './src/index.js',    print: './src/print.js',  },};

在使用了大佬提供的代码后，成功压缩了图片，但是出现了新的报错问题
目前代码

const path = require('path');const TerserPlugin = require("terser-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");const CopyPlugin = require("copy-webpack-plugin");const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {  output: {    filename: '[name].bundle.js',    path: path.resolve(__dirname, 'dist'),  },  mode:"development",  plugins: [    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css",    }),  ],  module: {    rules: [        //打包css      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader"],      },      {        //打包图片        test: /\.(png|svg|jpg|jpeg|gif)$/i,        type: 'asset/resource',      },            // //fonts字体      // {      //   test: /\.(woff|woff2|eot|ttf|otf)$/i,      //   type: 'asset/resource',      // },          ],  },    plugins: [      new CopyPlugin({ patterns: ["images/**/*.png"] }),    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css",    }),  ],  optimization: {    minimize: true,    minimizer: [       new ImageMinimizerPlugin({        minimizer: {          implementation: ImageMinimizerPlugin.imageminMinify,          options: {            plugins: [              "imagemin-gifsicle",              "imagemin-mozjpeg",              "imagemin-pngquant",              "imagemin-svgo",            ],          },        },        generator: [          {            type: "asset",            implementation: ImageMinimizerPlugin.imageminGenerate,            options: {              plugins: ["imagemin-webp"],            },          },        ],      }),    new TerserPlugin({        test: /\.js(\?.*)?$/i,      }),      new CssMinimizerPlugin(),    ],  },entry: {    index: './src/index.js',    print: './src/print.js',  },};

Answer 1

具体更多的配置信息可以去image-minimizer-webpack-plugin文档：
安装 imagemin 插件：

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

你看看官方的配置吧：

const CopyPlugin = require("copy-webpack-plugin");const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {  optimization: {    minimizer: [      "...",      new ImageMinimizerPlugin({        minimizer: {          implementation: ImageMinimizerPlugin.imageminMinify,          options: {            plugins: [              "imagemin-gifsicle",              "imagemin-mozjpeg",              "imagemin-pngquant",              "imagemin-svgo",            ],          },        },        generator: [          {            type: "asset",            implementation: ImageMinimizerPlugin.imageminGenerate,            options: {              plugins: ["imagemin-webp"],            },          },        ],      }),    ],  },  plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],};

plugins重复了，看下完整代码：

const path = require('path');const TerserPlugin = require("terser-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");const CopyPlugin = require("copy-webpack-plugin");const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {  output: {    filename: '[name].bundle.js',    path: path.resolve(__dirname, 'dist'),  },  mode: "development",  module: {    rules: [      // 打包css      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader"],      },      {        // 打包图片        test: /\.(png|svg|jpg|jpeg|gif)$/i,        type: 'asset/resource',      },    ],  },  plugins: [    new CopyPlugin({ patterns: ["images/**/*.png"] }),    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css",    }),    new ImageMinimizerPlugin({      minimizerOptions: {        plugins: [          "imagemin-gifsicle",          "imagemin-mozjpeg",          "imagemin-pngquant",          "imagemin-svgo",        ],      },    }),  ],  optimization: {    minimize: true,    minimizer: [      new TerserPlugin({        test: /\.js(\?.*)?$/i,      }),      new CssMinimizerPlugin(),    ],  },  entry: {    index: './src/index.js',    print: './src/print.js',  },};