为什么我的SVG文件会被Webpack拆分导致无法正常读取？

问题根源 #

• css-loader 默认开启 esModule: true 配置，与 svg-url-loader 默认的 CommonJS 导出模式不兼容，导致 CSS 中直接插入了模块导出的 JS 代码，而非解析后的 dataURL 或资源路径。
• 路径配置不匹配，单独输出的 SVG 文件路径与 CSS 引用路径不一致导致404。
• 多套 SVG 处理规则冲突，自定义 loader 配置被其他规则覆盖，导致 SVG 资源被二次处理。

具体修复步骤 #

1. 兼容模块导出模式 #

二选一即可，推荐优先修改 svg-url-loader 配置匹配 css-loader 默认行为：

方案A：修改 svg-url-loader 配置

{
  test: /\.svg$/,
  exclude: /node_modules/,
  use: {
    loader: 'svg-url-loader',
    options: {
      esModule: true, // 开启ES模块导出，匹配css-loader默认配置
      limit: 8192, // 可选配置：小于8k的SVG转dataURL，大于8k的输出为单独文件
    }
  }
}

方案B：修改 css-loader 配置

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        esModule: false, // 关闭ES模块导出，匹配loader的CommonJS输出
      }
    },
    {
      loader: 'sass-loader',
    },
  ],
}

2. 修正路径配置 #

如果需要将超过大小的 SVG 输出为单独文件，补充路径配置避免404：

{
  test: /\.svg$/,
  exclude: /node_modules/,
  use: {
    loader: 'svg-url-loader',
    options: {
      esModule: true,
      limit: 8192,
      outputPath: 'assets/images/', // 单独输出的SVG文件存放路径
      publicPath: '/assets/images/', // CSS中引用SVG的路径前缀，匹配output.publicPath配置
    }
  }
}

3. 避免规则冲突 #

如果存在其他内置 SVG 处理规则（比如部分脚手架默认配置），给自定义规则加上优先级：

{
  test: /\.svg$/,
  exclude: /node_modules/,
  use: { loader: 'svg-url-loader' },
  enforce: 'pre' // 优先执行当前规则，避免被其他规则覆盖
}

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