如何在 Gatsby JS 中使用自定义 Webpack Loader？

Question

我正在尝试更改 Gatsby JS 中 SVG 文件的默认 webpack 加载程序。我想使用 'svg-url-loader' 而不是默认的 'url-loader'。我已经安装了它，它可以很好地与 webpack-inline-loaders 一起使用。

但是为了避免重复该过程，我决定使用 onCreateWebpackConfig 节点 API 来更改 SVG 文件的加载程序。所以我在 gatsby-node.js 文件中添加了以下代码。

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.svg/,
          use: {
            loader: "svg-url-loader",
            options: {
              limit: 4096,
              iesafe: true,
            },
          },
        },
      ],
    },
  });
};

但是该网站现在不显示任何 SVG 图像，而是显示替代文本。这是因为这些 IMG 标签的 src 属性使用了错误的 base64 编码图像，而不是 UTF8 编码的 SVG XML 标签。

控制台没有记录任何错误。我也曾尝试在 /plugins 目录中创建一个本地插件，但它不起作用。我正在我的本地机器上开发我的站点并使用 Gatsby Cloud 构建它。两个地方都存在这个问题

这是 link 到 minimal repro。

Answer 1

这里的问题是，要在任何框架中使用自定义加载器，您必须先禁用默认加载器。然后你就可以添加你的自定义加载器了。因此，首先，您必须禁用默认值 'url-loader'，然后为 SVG 文件设置 'svg-url-loader'。

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  const config = getConfig();

  config.module.rules.find(
    (rule) =>
      rule.test &&
      rule.test.toString() ===
        "/\.(ico|svg|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/"
  ).test = /\.(ico|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/;

  config.module.rules.push({
    test: /\.svg/,
    use: {
      loader: "svg-url-loader",
      options: {
        limit: 4096,
        iesafe: true,
      },
    },
  });

  actions.replaceWebpackConfig(config);  
};

如何在 Gatsby JS 中使用自定义 Webpack Loader？

How to use a custom Webpack Loader in Gatsby JS?

svg

urlloader

node.js

webpack

gatsby