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
.
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 !
.
Ce plugin vous permet d'injecter du code à chaque construction de paquet.
J'espère que cet article vous a été utile.
Je vous dis à plus pour le prochain article.
Liens utiles :
- Configuration de l'environnement Angular
- Angular Builders
- Custom Webpack de @just-jeb
- Webpack
- Webpack Inject plugin
Article précédent Article suivant
Ajouter un commentaire