web-dev-qa-db-de.com

Angular CLI benutzerdefinierte Webpack-Konfiguration

In früheren Versionen von Angular gab es eine Option für Auswerfen , sodass Sie Ihre Webpack-Konfiguration nach Belieben ändern konnten.
Einer der häufigsten Anwendungsfälle für diese Funktion war das Hinzufügen benutzerdefinierter Webpack-Loader.

In Angular 6 wurde diese Option entfernt, so dass es derzeit buchstäblich keine Möglichkeit gibt, die Webpack-Konfiguration abzurufen (außer sie im angular Quellcode nachzuschlagen).

Gibt es eine Möglichkeit, der Anwendung Angular, die @ angle/cli 6+ verwendet, eine benutzerdefinierte Webpack-Konfiguration hinzuzufügen? Oder gibt es eine Möglichkeit, die Webpack-Konfiguration, die die neue Angular CLI verwendet, unter der Haube "auszuwerfen"?

angularwebpackangular-cliwebpack-loader
26
JeB

Haftungsausschluss: Ich bin der Besitzer der folgenden Bibliothek

Sie können die Bibliothek angle-builders verwenden, mit der Sie die vorhandenen Ziele browser und server mit einer benutzerdefinierten Webpack-Konfiguration erweitern können.

Die Verwendung ist ziemlich einfach:

  1. Installieren Sie die Bibliothek: npm i -D @angular-builders/custom-webpack

  2. Ändern Sie Ihre angular.json:

    "architect": {
   ...
   "build": {
       "builder": "@angular-builders/custom-webpack:browser"
       "options": {
              "customWebpackConfig": {
                 "path": "./extra-webpack.config.js",
                 "replaceDuplicatePlugins": true
              },
              "outputPath": "dist/my-cool-library",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json"
              ...
       }
  3. Fügen Sie extra-webpack.config.js zum Stammverzeichnis Ihrer Anwendung hinzu
  4. Fügen Sie die zusätzliche Konfiguration in extra-webpack.config.js (nur eine einfache Webpack-Konfiguration) ein.

Hier Sie können ein Beispiel finden, das der Browserkonfiguration node-loader Hinzufügt.

Weiterführende Literatur:
Customizing Angular CLI build - eine Alternative zu ng eject

33
JeB

Für Angular 8 @angular-builders/dev-server:generic ist veraltet und @angular-builders/custom-webpack:dev-server wird stattdessen verwendet, Quelle: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD .

Darüber hinaus müssen Sie möglicherweise npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] Wenn nach der Migration der folgende Fehler aufgetreten wäre architect_1.createBuilder is not a function.

2
Daniel Danielecki