Webpack 5使用html-loader加载svgs

x4shl7ld 于 2023-10-19 发布在 Webpack

关注(0)|答案(3)|浏览(124)

我最近升级到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中。
我们会很感激你的帮助。

webpack

来源：https://stackoverflow.com/questions/70775309/webpack-5-use-html-loader-to-load-svgs

3条答案

按热度按时间

zvms9eto1#

Webpack 5及以上

使用raw-loader或asset/inline loader。

webpack 4及更早版本

svg-inline-loader可以实现相同的功能（确认可以工作）。
我在https://survivejs.com/webpack/loading/images/#loading-svgs上列出了加载SVG的其他选项。

赞(0）回复(0）举报 2023-10-19

wlp8pajw2#

我使用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;
        }
      },
    },
  },
},

赞(0）回复(0）举报 2023-10-19

6vl6ewon3#

如果你使用的是HtmlWebpackPlugin，HtmlWebpackInlineSVGPlugin可以用来内联svgs。
下面是webpack配置的相关部分，以实现相同的目标：

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

赞(0）回复(0）举报 2023-10-19

我来回答

Webpack 5使用html-loader加载svgs

3条答案

Webpack 5及以上

webpack 4及更早版本

相关问题

热门标签

最新问答