angular - ngx build plus 使用 url-loader

Question

我正在尝试通过 ngx-build-plus 扩展 Angular CLI 构建。除了一件事，一切都很好。我需要将 url-loader 用于 png 和 svg 图像。我希望它将用图像代码替换css中的url。但它不起作用。我只是在我的包中获得了一组图像，并在 css 中获得了标准 url。

角度版本 8

这就是我使用配置的方式

const BASE64_RULE = {
    test: /\.(png|svg)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 2000 * 1024
        }
    }
};

exports.default = {
    config(cfg) {
        return new ConfigModifier(cfg)
            .renameChunk("main", "bundle")
            .addRule(BASE64_RULE)
            .removeRule(rule => rule.loader === "file-loader")
            .get();
    }
};

class ConfigModifier {
    constructor(config) {
        this.config = config;
    }

    get() {
        return this.config;
    }

    renameChunk(from, to) {
        const entry = this.config.entry;
        entry[to] = entry[from];
        delete entry[from];

        return this;
    }

    addRule(rule) {
        this.config.module.rules.push(rule);
        return this;
    }

    removeRule(predicate = () => false) {
        this.config.module.rules = this.config.module.rules.filter(rule => !predicate(rule));
        return this;
    }
}

这是生成的配置

[
  {
    "test":  /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
    "parser": {
      "system": true
    }
  },
  {
    "test":  /[\/\\]hot[\/\\]emitter\.js$/,
    "parser": {
      "node": {
        "events": true
      }
    }
  },
  {
    "test":  /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/,
    "parser": {
      "node": {
        "querystring": true
      }
    }
  },
  {
    "test":  /\.js$/,
    "exclude": /(ngfactory|ngstyle)\.js$/}
  },
  {
    "test": /\.js$/,
    "exclude": {},
    "enforce": "pre"
  },
  {
    "test": /\.css$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      }
    ]
  },
  {
    "test": /\.scss$|\.sass$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "sass-loader",
        "options": {
          "implementation": {
            "info": "dart-sass\t1.22.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.4.0\t(Dart Compiler)\t[Dart]",
            "types": {}
          },
          "sourceMap": true,
          "precision": 8,
          "includePaths": []
        }
      }
    ]
  },
  {
    "test": /\.less$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "less-loader",
        "options": {
          "sourceMap": true,
          "javascriptEnabled": true
        }
      }
    ]
  },
  {
    "test": /\.styl$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "stylus-loader",
        "options": {
          "sourceMap": true,
          "paths": []
        }
      }
    ]
  },
  {
    "test": /\.css$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      }
    ]
  },
  {
    "test": /\.scss$|\.sass$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "sass-loader",
        "options": {
          "implementation": {
            "types": {}
          },
          "sourceMap": true,
          "precision": 8,
          "includePaths": []
        }
      }
    ]
  },
  {
    "test": /\.less$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "less-loader",
        "options": {
          "sourceMap": true,
          "javascriptEnabled": true
        }
      }
    ]
  },
  {
    "test": /\.styl$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "stylus-loader",
        "options": {
          "sourceMap": true,
          "paths": []
        }
      }
    ]
  },
  {
    "test": /\.tsx?$/,
    "loader": "node_modules\\@ngtools\\webpack\\src\\index.js"
  },
  {
    "test":  /\.(png|svg)$/,
    "use": {
      "loader": "url-loader",
      "options": {
        "limit": 2048000
      }
    }
  }
]

PS Chunk 名称重命名成功，所以我可以假设 ConfigModifier 正在工作。