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

Question

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

但是为了避免重复这个过程，我决定使用SVG来更改onCreateWebpackConfig文件的加载器。因此，我在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图像，而是显示alt文本。这是因为那些IMG标记的src属性使用的是错误的base64编码图像，而不是UTF8编码的SVG标记。

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

这是一个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);  
};