Angular : utiliser Webpack dans son projet

18 août 2020 clemdesign

Depuis Angular 7, on configure un projet via le fichier angular.json. Mais on peut aussi vouloir utiliser un plugin Webpack dans son projet. Voici la solution !

Angular se base sur Webpack pour construire son application. Cependant, depuis Angular 7, le CLI Angular utilise le fichier angular.json pour les directives de compilation. Webpack, même utilisé, n'est plus accessible par nos propres plugins personnalisés.

Mais il existe une solution pour overrider les directives de compilation natives d'Angular : Angular Builders.

@just-jeb a développé un builder pour utiliser les fonctionnalités Webpack dans son application Angular.

Pour cela, il suffit d'exécuter la commande suivante :

npm i -D @angular-builders/custom-webpack

Puis, dans le fichier angular.json :

"architect": {
    ...
    "build": {
              "builder": "@angular-builders/custom-webpack:browser"
              "options": {
                     "customWebpackConfig": {
                        "path": "./webpack-extra.config.js"
                     }
                     ...
              }
              ...
    "serve": {
              "builder": "@angular-builders/custom-webpack:dev-server"
              "options": {
                     "customWebpackConfig": {
                        "path": "./webpack-extra.config.js"
                     }
                     ...
              }

Enfin, dans le fichier webpack-extra.config.js :

console.log('custom webpack config OK');
module.exports = {
  plugins: [
  ]
};

Maintenant, vous pouvez vérifier que tout fonctionne avec ng build et ng serve.

Ng Build

NB: Les directives browser, server, karma et dev-server sont gérées par le builder Custom Webpack

Un peu plus loin

Vous avez pu configurer Webpack dans Angular mais concrétement, cela donne quoi ?

Pour vérifier l'implémentation, testons le plugin InjectPlugin.

Exécutez la commande suivante:

npm i  npm install webpack-inject-plugin

Puis, dans le fichier webpack-extra.json :

const InjectPlugin = require('webpack-inject-plugin').default;

module.exports = {
  plugins: [
    new InjectPlugin(function () {
      return "console.log('InjectPlugin OK !');"
    })
  ]
};

Exécutez la commande :

ng serve

Puis vérifiez dans la console le message InjectPlugin OK !.

Inject Plugin

Ce plugin vous permet d'injecter du code à chaque construction de paquet.

J'espère que cet article vous a été utile. xD

Je vous dis à plus pour le prochain article. ;)

Liens utiles :

Article précédent Article suivant

Ajouter un commentaire