Rassembler tous les ingrédients éparpillés d’une recette en un seul plat prêt à servir : un empaqueteur de modules fait cela pour du code JavaScript découpé en dizaines de fichiers, en analysant leurs dépendances pour produire un fichier final compact.
webpack, l’empaqueteur qui équipe Gutenberg
Le paquet officiel @wordpress/scripts embarque webpack déjà configuré pour compiler les blocs Gutenberg : il transforme du JSX et des modules ES en un fichier build/index.js compatible avec tous les navigateurs, tout en générant un fichier index.asset.php qui liste les dépendances WordPress à déclarer auprès de wp_enqueue_script.
Exemple
{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
}
}La commande npm run build déclenche l’empaquetage en production (fichiers minifiés), tandis que npm run start lance un mode de développement qui recompile automatiquement à chaque modification.
Bon à savoir
- Vite s’impose de plus en plus comme alternative à webpack pour sa rapidité en développement, grâce à un serveur qui sert les modules ES nativement sans tout recompiler à chaque changement.
- Le « code splitting » permet à un empaqueteur de découper le résultat en plusieurs fichiers chargés à la demande, plutôt qu’un seul fichier volumineux téléchargé en une fois.
- Un fichier source map, généré en option par l’empaqueteur, relie le code minifié livré au navigateur au code source original, précieux pour déboguer en production.