JS

À quoi sert Webpack et comment fonctionne-t-il ?

  • 20 novembre 2019

Pourquoi une présentation sur Webpack ?

Dans une vidéo que nous avons aimé sur Youtube Anthony Welc part d’un composant React afin d’expliquer comment mettre en place une configuration relativement simple pour gérer les fichiers HTML, CSS et JS.

En partant de cette base, un consultant de NeoLynk a voulu mettre en place une configuration scindée en 3 fichiers :

  1. Un pour le développement 
  2. Un pour la mise en production
  3. Un fichier commun qui rassemble des configurations communes pour le développement et la mise en production

Le point commun de tout projet ce sont les assets : fichiers CSS, PNG, JPEG, SVG. Il y a 2 possibilités. Soit on s’occupe de tous ces assets nous-même, soit on fait appel à une pléiade d’outils comme : Browserify, Gulp, Broccoli, Parcel, Brunch… ou Webpack, sur lequel nous allons nous focaliser.

Qu’est-ce que Webpack ?

“ Webpack est un modules bundle open source. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur. Cet outil est également capable de transformer, regrouper ou empaqueter à peu près n’importe quelle ressource. ”

Source Wikipédia

Comment-fonctionne-webpack

Le point d’entrée de Webpack est utilisé pour créer un pack de dépendance.

À partir de là, il détermine les autres modules et autres bibliothèques dont dépend ce point d’entrée, et les inclut dans ce pack.

Par défaut, la propriété d’entrée est déterminé sur source/index.js. Cependant il est possible de spécifier n’importe quelle point d’entrée et même d’en configurer plusieurs.

Le fichier va ensuite passer par 2 étapes, une qui concerne les loaders et une autre qui concerne les plugins. Les fichiers statiques sont générés à la sortie.

La propriété de sortie indique à Webpack ou émettre les paquets et quel nom on peut donner à ces fichiers. La valeur de la propriété par défaut est dist/main.js mais il est possible de configurer cela sans problème.

“ L’unique but de Webpack est de faire un joli package ! ”

Le but de Webpack est de parcourir les fichiers, de trouver les relations entre les fichiers et de fournir des solutions pour packager tous les fichiers qu’il trouve ensemble. Lorsqu’il identifie des fichiers JS, il sait les manipuler, les concaténer. S’il rencontre des éléments qui ne sont pas du JavaScript, alors il a besoin de loader pour savoir les interpréter.

Les loaders

webpack-loaders

Webpack est capable de gérer un grand nombre de types de fichiers grâce à son système de Loader. Un type de fichier correspond à un loader qui a pour but d’indiquer à Webpack comment faire pour charger ce type de fichier.

babel-webpack

La documentation de Webpack propose un ensemble de loaders. Babel est un exemple de loader bien connu, qui dans l’exemple ci-dessus va transpiler de l’ES6 en ES5.

L’enchaînement des loaders

Chacun de nos fichiers de configuration dispose d’un array “rules” où sont renseignés les différents loaders utilisés.

webpack-enchainement-loaders

Dans cet exemple (volontairement raccourci), un loader destiné au HTML est configuré.

Attardons-nous sur la configuration des fichiers JS, dans ce cas de figure, ESLint est également ajouté, nous prenons le soin d’exclure les fichiers contenu dans le répertoire node_modules. L’option emitWarning affichera les erreurs détectés par ESLint sans pour autant interrompre la compilation.

Vous trouverez ici une liste de loader sur la documentation de Webpack : https://webpack.js.org/loaders/

liste-loaders

Il est possible d’indiquer des règles telles que “plusieurs loaders vont être enchaînés”. La liste des loaders est importante. Il existe aussi des cas où l’on peut définir dans les options du loader les autres loaders qui vont être dépendants. Cela permet de ne pas avoir cette problématique d’ordre de chargement.

Les plugins

plugins-webpack

Après le chargement des types de fichier avec le loader, les plugins vont se charger d’apporter des traitements spécifiques.

De base, Webpack ne sait que manipuler du JS mais il inclut aussi des plugins de minification. Ainsi quand on lance Webpack en mode production, il va automatiquement faire des optimisations avec de la minification.

Un exemple de plugin : la minification du HTML

html-webpack

Il y a des plugins supplémentaires qui vont venir gérer le HTML et notamment le clean webpack plugin qui va vider le répertoire disque à chaque fois qu’on va lancer le build.

La version simple de Webpack vient avec son système de fonctionnement qui inclut un certain nombre de loaders et de plugins de base. Le loader de base lit du JS et sait interpréter les require dans un JS en CommonJS. En revanche, il ne sait pas lire du HTML ou du CSS. C’est pour cette raison qu’on a besoin de loaders dédiés au CSS et au HTML, et de Babel pour faire tout ce qui est ES6. Les dépendances de développeurs sont assez importantes pour ce type de configuration.

Jarvis est un dashboard que l’on peut ajouter à la phase de développement pour voir d’une manière générale comment les choses se passent.

Pour aller plus loin

Youtube – Colt Steele : https://www.youtube.com/channel/UCrqAGUPPMOdo0jfQ6grikZw

A Beginner’s Guide to Webpack : https://www.sitepoint.com/webpack-beginner-guide/

En savoir plus sur : la Tribu JavaScript de NeoLynk