Я пытаюсь расширить Angular CLI build с помощью ngx-build-plus. Все работает нормально, кроме одного. Мне нужно использовать url-загрузчик для изображений PNG и SVG. Я ожидаю, что он заменит URL в css на код изображения. Но это не работает. Я просто получаю пакет изображений в своем комплекте и стандартные URL-адреса в css.
Angular версия 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 Имя чанка успешно переименовывается, поэтому я могу предположить, что ConfigModifier работает.