webpack中svgo-loader配置不生效，禁止删除viewBox规则无效

配置不生效核心原因 #

你遇到的问题主要由三点导致：

• SVGO 1.x和2.x的插件配置格式不兼容，网上多数旧教程是1.x写法，新版已不支持
• YAML配置存在拼写错误
• 旧版svgo-loader的externalConfig参数已废弃，且相对路径解析规则和预期不符，配置找不到时会直接fallback到默认规则，不会抛出错误

可行解决方案 #

方案1：直接在webpack配置内写配置（最稳妥，无需外部文件）

svgo 2.x + svgo-loader 3.x及以上版本必须按新版格式编写，默认插件规则要在preset-default的overrides下覆盖：

{
  loader: 'svgo-loader',
  options: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            removeViewBox: false,
            removeTitle: false
          }
        }
      }
    ]
  }
}

方案2：使用外部svgo.config.js配置

配置路径写绝对路径避免解析问题：

// webpack配置
const path = require('path');
// ...
{
  loader: 'svgo-loader',
  options: {
    configFile: path.resolve(__dirname, './svgo.config.js')
  }
}

你现有的svgo.config.js内容本身正确，无需修改。

方案3：YAML配置修正

首先修正YAML的拼写错误和格式，同时使用绝对路径指定文件：

# svgo-config.yml
plugins:
  - name: preset-default
    params:
      overrides:
        removeTitle: false
        removeViewBox: false

// webpack配置
const path = require('path');
// ...
{
  loader: 'svgo-loader',
  options: {
    configFile: path.resolve(__dirname, './svgo-config.yml')
  }
}

内容的提问来源于stack exchange，提问作者Mukul Kumar Jha