如何使用webpack结合自定义HTML模板加载使用SVG雪碧图

方案1：沿用require语法直接拼接路径（和普通图片逻辑一致） #

这是最简便的适配方案，不需要额外引入插件：

1. 先确保webpack配置中已处理svg文件的输出：
   webpack5直接配置asset资源模块即可：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/resource',
        generator: {
          // 自定义svg输出路径
          filename: 'assets/img/[name].[contenthash][ext]'
        }
      }
    ]
  }
}

webpack4及更早版本安装file-loader后配置：

{
  test: /\.svg$/,
  use: 'file-loader',
  options: {
    name: 'assets/img/[name].[hash].[ext]'
  }
}

2. 修改模板中use标签的href写法，和普通图片的require逻辑一致，拼接锚点即可：

<button class="nav__btn nav__btn--bookmarks">
    <svg class="nav__icon">
        <use href="<%= require('./src/img/icons.svg') %>#icon-bookmark"></use>
    </svg>
    <span>Bookmarks</span>
</button>

方案2：内联整个SVG雪碧图（减少网络请求） #

如果雪碧图体积不大，可以直接把整个雪碧图内容内嵌到HTML中，不需要额外请求雪碧图文件，直接用内联锚点即可：

1. webpack配置中新增针对雪碧图的raw类处理：
   webpack5配置：

{
  test: /icons\.svg$/, // 只匹配你的雪碧图文件
  type: 'asset/source'
}

webpack4及更早版本安装raw-loader后配置：

{
  test: /icons\.svg$/,
  use: 'raw-loader'
}

2. 在HTML模板的body开头插入雪碧图内容：

<body>
<%= require('./src/img/icons.svg') %>
<!-- 其余页面内容 -->
<button class="nav__btn nav__btn--bookmarks">
    <svg class="nav__icon">
        <!-- 直接写锚点即可，不需要加雪碧图路径 -->
        <use href="#icon-bookmark"></use>
    </svg>
    <span>Bookmarks</span>
</button>
</body>

方案3：修复HtmlWebpackInlineSVGPlugin配置 #

如果你要继续使用该插件，需要调整配置项适配use标签：

1. 确保插件实例化顺序在HtmlWebpackPlugin之后
2. 新增配置匹配use标签的href属性：

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({/* 你的原有配置 */}),
  new HtmlWebpackInlineSVGPlugin({
    runPreEmit: true,
    // 匹配use标签的href属性
    tagName: ['use'],
    attribute: 'href'
  })
]

排查注意事项 #

• 确认require的路径是相对当前HTML模板文件的相对路径，不是相对项目根目录的路径
• 检查webpack配置中是否有其他svg处理规则（如svg转组件的loader）抢了雪碧图的处理权，可以用resourceQuery或者include/exclude区分普通svg和雪碧图

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