Webpack - Formation Gutenberg - Capitaine WP

Formation « Créer des blocs avec Gutenberg »

WebPack

Lecture :4 minutes •0

Webpack est un outil basé sur NPM permettant au développeur Javascript de se faciliter la vie en compilant différents fichiers en un seul pour la production. C’est aujourd’hui devenu un incontournable des développeurs React.

Webpack, c’est quoi ?

Si vous avez déjà eu à faire à des outils comme Gulp, Grunt ou Brunch, dites-vous simplement que Webpack est une alternative plus évoluée.

On dit également que Webpack est un module Bundler : il prend tous vos fichiers de développement et les compile en un seul gros fichier pour la mise en production. Il est capable d’intervenir sur des fichiers JS, CSS…

C’est donc très pratique pour les navigateurs qui n’auront à effectuer qu’un nombre limité de requêtes HTTP pour charger une application web.

Le développeur peut donc tranquillement de son côté découper son code en plusieurs fichiers et ainsi avoir une meilleure organisation de son projet. Pendant ce temps Webpack va surveiller vos fichiers, et lors d’un changement il va les réunir, les compiler, les vérifier, autant pour le Javascript tout comme pour les préprocesseurs CSS du style Sass.

le fonctionnement de webpack
Webpack permet de compiler les ressources statiques et les préparer pour la production

Pendant que l’on code, Webpack est lancé en ligne de commande et va surveiller nos fichiers : dès qu’il détectera un changement, il va lancer les actions nécessaires pour les compiler.

Pourquoi a-t’on besoin de Webpack avec Gutenberg ?

Quand on va coder nos blocks, on créera pour chacun d’entre eux un dossier et un script dédié.

Un fichier principal nommé index.js permettra d’appeler chacun de nos blocs, rangés dans leurs dossiers respectifs.

Capture d'écan de l'architecture des dossiers et fichiers dans notre extension. Ici on voit index.js qui importe les autres fichiers
Le fichier index.js importera tous nos blocs

Mais en production on ne peut pas appeler chaque script indépendamment car cela créerait tout autant de requêtes HTTP : ce serait un carnage pour les performances. C’est pour cela que le code est compilé et « bundlé » dans un seul fichier JS.

En PHP on peut appeler d’autres fichiers via les fonctions include() et require(). Ce n’est pas un souci puisque ça se passe côté serveur, ce sont au final de simples appels de fichiers sur la même machine : le serveur.

Mais côté client il faut tout envoyer d’un coup, d’où le fichier unique compilé, compressé et traduit pour être compatible avec tous navigateurs.

Dans le cadre de cette formation, le fichier index.js sera compilé dans le dossier build/index.js. C’est ce dernier qui sera appelé par WordPress. Mais on y reviendra un peu plus tard.

Il faut savoir également que la compilation de Webpack va même embarquer nos dépendances NPM (comme on a vu dans le cours précédent), comme ça au final nous n’avons besoin d’appeler qu’un seul fichier de script depuis WordPress (en réalité il y en 2, un spécial pour le front et un autre pour le back).

Et enfin, on va parfois utiliser du JS moderne (ESnext) qui n’est pas forcément encore compris par tous les navigateurs. Webpack, via l’intermédiaire de Babel (une autre dépendance NPM), va nous « traduire » notre code en quelque chose de rétrocompatible.

C’est pour toutes ces raisons que l’on a besoin de Webpack avec Gutenberg, qui s’occupe d’automatiser ces tâches afin que le développeur ne se focalise que sur ce qui est important : le développement.

Conseil

En résumé Webpack va : compiler tous nos fichiers de scripts en un seul, dépendances comprises, les traduire via Babel en du Javascript compréhensible par tous les navigateurs ainsi que compiler nos styles Sass en CSS.

Et pour configurer Webpack, c’est galère ?

Vous avez peut-être déjà entendu des développeurs parler de Webpack et pas forcément en bien.

Beaucoup disent que même si ça marche bien, la configuration préalable est un véritable calvaire, même si on est un habitué.

Promis, on va éviter les galères avec Webpack

Mais ne soyez pas inquiet ! Grâce à un outil que je vous présente juste après, on n’aura absolument pas besoin de configurer quoi que ce soit ! Ouf !

On aura donc tous les avantages de Webpack sans les inconvénients !

Le saviez-vous ?

En réalité on pourrait se passer de Webpack et écrire du javascript non « moderne » pour créer nos blocks. Cependant cela implique une syntaxe vraiment compliquée et une lisibilité du code désastreuse donc je vous déconseille fortement cette approche. Je vais justement vous montrer la différence dans un prochain cours.

Si vous souhaitez en savoir plus sur Webpack, Putain de code a écrit un article intéressant sur le sujet !


Vous connaissez maintenant les principaux outils du développeur front-end. Comme on a pu le voir le métier a beaucoup évolué ces dernières années avec l’arrivée de ces outils (et évoluera encore beaucoup je pense).

Je tenais à vous faire cette courte introduction à Webpack afin de bien comprendre son utilité, et à quoi il va nous servir dans le cadre de la création de blocs.

On va voir dans le prochain cours un outil qui va gérer pour nous la configuration de Webpack afin que l’on n’ait même pas besoin de s’en soucier, ce qui va grandement nous simplifier la vie !

0

Questions, réponses et commentaires

Laisser un commentaire