Webpack 5 使用 html-loader 加载 svgs

Question

我最近升级到 Webpack 5，我的 html-loader 不再加载 svg 文件并内联它们。

这是我在 webpack 中的 svg 规则

{
  test: /\.svg$/,
  use: [
    {
       loader: 'html-loader',
       options: {
           minimize: true,
       },
    },
  ],
},

无论我如何尝试导入它，它似乎只是创建一个文件而没有给我一串 HTML.

import mySvg from "../path/to/my.svg"

let mySvg = require("../path/to/my.svg").default;

// output = "/build/path/my.svg"
// output I want = "<svg>...."

它过去不会给我几个构建文件，而是将它们内联到我的 JS 中。

不胜感激。

Answer 1

svg-inline-loader同样可以实现（确认有效）

我在 https://survivejs.com/webpack/loading/images/#loading-svgs 列出了加载 SVG 的其他选项。

Webpack 5 使用 html-loader 加载 svgs

Webpack 5 use html-loader to load svgs

javascript

svg

webpack

webpack-5

webpack-html-loader