Configuration personnalisée de webpack par Angular CLI

Question

Dans les versions précédentes d'Angular, il y avait une option pour éjecter afin que vous puissiez modifier votre configuration webpack à votre guise.
L'un des cas d'utilisation les plus courants de cette fonctionnalité était l'ajout de chargeurs webpack personnalisés.

Dans Angular 6 cette option a été supprimée, donc actuellement il n'y a littéralement aucun moyen d'obtenir la configuration de webpack (à part la rechercher dans le code source d'Angular).

Existe-t-il un moyen d'ajouter une configuration webpack personnalisée à une application Angular qui utilise @angular/cli 6+ ? Ou alternativement, y a-t-il un moyen d'"éjecter" la configuration webpack que le nouveau CLI Angular utilise sous le capot ?

Answer 1

Clause de non-responsabilité : Je suis le propriétaire de la bibliothèque ci-dessous.

Vous pouvez utiliser constructeurs angulaires qui vous permet d'étendre les browser et server avec une configuration webpack personnalisée.

L'utilisation est assez simple :

1. Installez la bibliothèque : npm i -D @angular-builders/custom-webpack

2. Modifiez votre 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. Ajouter extra-webpack.config.js à la racine de votre application

4. Mettez la configuration supplémentaire à l'intérieur extra-webpack.config.js (juste une simple configuration de webpack)

Ici vous pouvez trouver un exemple qui ajoute node-loader à la configuration du navigateur.

Pour en savoir plus :
Personnaliser la construction d'Angular CLI - une alternative à ng eject

Answer 2

Pour Angular 8 @angular-builders/dev-server:generic a été déprécié et @angular-builders/custom-webpack:dev-server est utilisé à la place, source : https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD .

En plus de cela, vous pouvez avoir besoin d'exécuter npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest si après la migration vous auriez vu l'erreur suivante architect_1.createBuilder is not a function .