javascript - 未知插件中的警告 : imageminSvgo. 您是否忘记安装插件？

Question

这是我从 Webpack 收到的警告，尽管安装了 imageminSvgo 插件。
我在 Image Minimizer 插件中使用它作为 imageminSvgo ，但 Webpack 似乎没有检测到它。
在了解如何以最佳方式在我的项目中使用此插件方面，我非常感谢一些帮助。
这是我的 webpack.config.js 配置。
webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
// const imageminSvgo = require('imagemin-svgo')
const mode = "production";

module.exports = {
  devtool: false,
  stats: "errors-warnings",
  resolve: {
    alias: {
      CssFolder: path.resolve(__dirname, "src/stylesheets/"),
      JsFolder: path.resolve(__dirname, "src/javascripts/"),
      ImgFolder: path.resolve(__dirname, "src/images/"),
    },
  },
  entry: { TOAA: "./src/index.js" },
  mode: mode,
  devServer: {
    port: 8080,
    // contentBase: "./build",
    hot: true,
    // overlay: true,
    compress: true,
    historyApiFallback: true,
  },
  output: {
    filename: "[name]-[contenthash].bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    // imageminSvgo({
    //   plugins: [
    //     {
    //       name: "removeViewBox",
    //       active: false,
    //     },
    //   ],
    // }),
    new CompressionPlugin(),
    new HtmlWebpackPlugin(
      { template: "./public/index.html" },
      { inject: true }
    ),

    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename:
        mode === "production"
          ? "[name]-[contenthash].bundle.css"
          : "[name].css",
    }),
    new ImageMinimizerPlugin({
      minimizerOptions: {
        // Lossless optimization with custom option
        // Feel free to experiment with options for better result for you
        plugins: [
          ["gifsicle", { interlaced: true }],
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 5 }],
          ["imageminSvgo", { removeViewBox: true }],
          // Svgo configuration here https://github.com/svg/svgo#configuration
          [
            "svgo",
            {
              plugins: [
                {
                  name: "removeViewBox",
                  active: false,
                },
                {
                  name: "addAttributesToSVGElement",
                  params: {
                    attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
                  },
                },
                {
                  name: "preset-default",
                  params: {
                    overrides: {
                      // customize plugin options
                      convertShapeToPath: {
                        convertArcs: true,
                      },
                      // disable plugins
                      convertPathData: false,
                    },
                  },
                },
              ],
            },
          ],
        ],
      },
    }),
    new NodePolyfillPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: {} },
          { loader: "css-loader", options: { importLoaders: 1 } },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      overrideBrowserslist: ["last 3 versions", "ie >9"],
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.(jpe?g|png|gif|svg|jpg)$/i,
        type: "asset",
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

如果需要其他信息，请告诉我。

Answer 1

尝试重新安装 imagemin 强制安装插件。使用这样的东西: npm install -g imagemin-cli@3.0.0 --unsafe-perm=true --allow-root