# Empaqueteur de modules

> Outil qui rassemble plusieurs fichiers JavaScript (ou CSS) reliés entre eux en un ou plusieurs fichiers optimisés prêts à être servis au navigateur.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/empaqueteur-de-modules/

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.