ngx build plus с использованием url-загрузчика - PullRequest
3 голосов
/ 22 января 2020

Я пытаюсь расширить 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 работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...