Webpack提示imageminSvgo为未知插件 已安装仍无法识别问题求解

核心问题原因 #

• 注释了imagemin-svgo的引入语句，插件无法获取到依赖实例
• ImageMinimizerPlugin中错误使用字符串"imageminSvgo"作为插件名，正确用法需要直接传入引入后的插件函数
• 同时配置了imageminSvgo和svgo两条SVG优化规则，存在重复冲突
• 配置文件顶部未引入path模块，会导致路径解析报错
• 配置存在两个重复的resolve节点，上层的别名配置会被下层覆盖

具体修改步骤 #

1. 确认依赖安装正确 #

执行命令安装缺失依赖：

npm install imagemin-svgo path --save-dev

2. 修改webpack.config.js配置 #

（1）补充缺失引入、取消注释

// 补充path模块引入
const path = require('path')
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");
// 取消imagemin-svgo的引入注释
const imageminSvgo = require('imagemin-svgo')
const mode = "production";

（2）合并重复的resolve节点

删除两个独立的resolve节点，合并为一个：

resolve: {
  alias: {
    CssFolder: path.resolve(__dirname, "src/stylesheets/"),
    JsFolder: path.resolve(__dirname, "src/javascripts/"),
    ImgFolder: path.resolve(__dirname, "src/images/"),
  },
  extensions: [".js", ".jsx"],
},

（3）修正ImageMinimizerPlugin配置

删除重复的imageminSvgo、svgo字符串配置项，替换为引入后的插件实例，同时删除plugins数组中注释掉的无效imageminSvgo({...})配置：

new ImageMinimizerPlugin({
  minimizerOptions: {
    plugins: [
      ["gifsicle", { interlaced: true }],
      ["jpegtran", { progressive: true }],
      ["optipng", { optimizationLevel: 5 }],
      // 正确写法：传入引入的imageminSvgo，搭配自定义SVG配置
      [imageminSvgo, {
        plugins: [
          {
            name: "removeViewBox",
            active: false,
          },
          {
            name: "addAttributesToSVGElement",
            params: {
              attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
            },
          },
          {
            name: "preset-default",
            params: {
              overrides: {
                convertShapeToPath: {
                  convertArcs: true,
                },
                convertPathData: false,
              },
            },
          },
        ],
      }],
    ],
  },
}),

验证 #

重新执行Webpack打包命令，告警会消失，SVG优化规则正常生效。

内容的提问来源于stack exchange，提问作者Cosmas Ochieng