未知插件中的警告：imageminSvgo。你忘记安装插件了吗？

Posted 2023-02-21

【中文标题】未知插件中的警告：imageminSvgo。你忘记安装插件了吗？

【英文标题】：WARNING in Unknown plugin: imageminSvgo. Did you forget to install the plugin?

【发布时间】：2021-11-12 05:29:15

【问题描述】：

这是我从 Webpack 收到的警告，尽管安装了 imageminSvgo 插件。

我在 Image Minimizer Plugin 中将它用作 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"],
  ,
;

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

【问题讨论】：

遇到同样的问题你找到解决办法了吗？

imagemin-webp 也有同样的问题。插件肯定已安装，但 image-minimizer-webpack-plugin 没有找到它们。这个问题看起来可能，但我也无法让它与 imagemin-svgo 一起工作，至少这个问题已修复：github.com/webpack-contrib/image-minimizer-webpack-plugin/…

【参考方案1】：

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