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"?

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