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 的其他選項。

Answer 2

我使用posthtml和posthtml-inline-svg插件。

const postHtml = require('posthtml');
const postHtmlInlineSvg = require('posthtml-inline-svg');

{
  test: /\.html$/,
  use: {
    loader: 'html-loader',
    options: {
      esModule: false,
      preprocessor: async (content, loaderContext) => {
        try {
          return await postHtml(postHtmlInlineSvg({ cwd: loaderContext.context, tag: 'icon', attr: 'src' }),).process(content)).html;
        } catch (error) {
          loaderContext.emitError(error);
          return content;
        }
      },
    },
  },
},

Answer 3

如果您使用HtmlWebpackPlugin ，則HtmlWebpackInlineSVGPlugin可用於內聯 svg。

以下是 webpack 配置的相關部分，以實現相同的目的：

{
  // ...
  module: {
    rules: [
      {
        test: /\.html/,
        loader: "html-loader",
      },
      // ...
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInlineSVGPlugin({
      inlineAll: true,
    }),
    // ...
  ]
}