Qu’est-ce que webpack ?

Webpack est un module bundler

Le but principal de webpack et de rassembler tous les fichiers JavaScript sur lequel vous travailler pour les empaqueter en un seul fichier.

Pour faire simple, grâce à un fichier de configuration, on va fournir comme point de départ un fichier JavaScript. Webpack va analyser le code à partir de ce fichier et scanner les imports. Il va suivre ces imports et trouver les fichiers à importer. Puis dans ces fichiers, il va une nouvelle fois scanner les imports afin d’en extraire les fichiers suivants. Il pourra faire ça autant de fois que nécessaire jusqu’à ce qu’il ait récupérer tout le code. On peut voir cet outil comme un robot qui explore vos fichiers à travers vos déclarations de chargement. Avec cette méthode, Webpack va construire un arbre de dépendance, c’est-à-dire un arbre de tous ces codes liés entre eux.

Webpack utilisera cet arbre de dépendance pour empaqueter tout son parcours vers un unique fichier de sortie qu’on appellera ici « bundle.js ». Ainsi, cet outil vous permettra d’envoyer un seul fichier JavaScript pour votre application en ligne. Là on vient de parler de l’utilisation de base. Mais ça ne s’arrête pas là.

Webpack peut parcourir tout type de lien

Si on lui donne les moyens de comprendre le code, Webpack peut analyser tout type de lien. Comme on l’a déjà vu, ça peut être des imports en JavaScript, MAIS, si vous changez le fichier d’entrée par un fichier CSS (ou même un fichier HTML ,soyons fous), et bien là, au lieu de tomber sur des imports, Webpack pourrait tomber sur des URL, ou encore des « src » pour charger des images. Malheureusement, comme on l’a dit, Webpack ne comprend que le JavaScript par défaut. C’est là qu’interviennent les loaders.

Les loaders pour comprendre tout type de code

Les loaders vont jouer le rôle de traducteur pour comprendre du CSS, du HTML, et plein d’autres choses. Revenons sur l’exemple du fichier d’entrée CSS en configuration. D’abord on test le type du fichier. Si c’est un fichier CSS, on le passera par un loader qui s’appelle css-loader. Maintenant webpack comprend le CSS. À partir de là, notre webpack pourra faire son travail habituel de parcours de fichiers et construire son arbre de dépendance. Bien sûr, pendant son parcours, il pourrait aussi tomber sur des URL menant vers des fichiers qu’il ne comprendrait pas. Et bien, on repart dans la configuration, même chose, on test si par exemple on a affaire à des fichiers PNG ou des JPEG et là on va utiliser un nouveau loader qui s’appelle « file-loader » pour interpréter les images. Ça permettra à webpack de comprendre que ce sont des fichiers de ressource.

À la fin , on pourrait se retrouver à construire un arbre de dépendance extrêmement divers avec tous ces éléments. Bon, tout ça, c’est cool, mais à quoi peut bien nous servir de comprendre des polices d’écriture ou des images dans cet arbre de dépendance ? Sachez qu’on a utilisé des loaders uniquement pour comprendre nos fichiers, mais on peut ajouter des loaders pour manipuler le contenu et effectuer des post-traitements. Et c’est là toute la puissance de webpack.

Les Loaders pour manipuler

Une fois qu’on arrive à comprendre le contenu du fichier grâce aux loadeurs, il est possible d’ajouter d’autres loaders et de les accumuler afin d’effectuer des traitements sur notre contenu avant de les exporter. Ça peut être des traitements de toute nature. Par exemple pour les images on pourrait décider de les optimiser et de les compresser grâce à un loader consacré au traitement des images avant de les exporter vers un dossier final. On pourrait aussi utiliser des moteurs comme Babel pour le JavaScript ou encore SASS pour le CSS pour faciliter notre développement. Tout ça peut être fait avec l’ajout de loaders supplémentaires pour le traitement de notre contenu. Bref on peut faire des choses extrêmement complexes avec les loaders. Le seul problème c’est qu’il faut que les fichiers passent par le graphe de dépendance et quand ce n’est pas le cas c’est un peu plus compliqué. Mais ça peut être résolu par les plugins.

Les plugins pour tout ce que les loaders ne savent pas faire

Parfois on a besoin de faire plus qu’interpréter le code et le modifier. J’entends par là supprimer des fichiers résiduels, modifier dynamiquement le nom de sortie des fichiers, ou même faire des traitements sur certains fichiers qui ne rentrent pas dans le flux de dépendance de Webpack. Et bien pour toutes ces choses que les loaders ne savent pas gérées il y a les plugins. Vous pourriez donc avoir un plugin pour copier des fichiers vers votre dossier de destination, pour supprimer des fichiers résiduels, un plugin aussi pour créer un serveur web de développement pour voir en temps réel vos changements sur le CSS ou le JavaScript. Enfin voilà tout ça pour dire que les plugins sont la touche finale de Webpack pour transformer nos configurations en un outil redoutable ou une véritable machine à gaz. Ça dépend du projet des personnes qui l’utilisent.