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

问题描述

我正在尝试更改 Gatsby JS 中 SVG 文件的默认 webpack 加载器。我想使用“svg-url-loader”而不是默认的“url-loader”。我已经安装了它，它与 webpack-inline-loaders 一起工作得很好。

但为了避免重复该过程，我决定使用 onCreateWebpackConfig Node 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 构建它。两个地方都存在问题。

这是 minimal repro 的链接。

解决方法

这里的问题是，要在任何框架中使用自定义加载器，您必须先禁用默认加载器。然后你就可以添加你的自定义加载器了。因此，首先，您必须禁用默认值“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);  
};