Si vous avez commencé à découvrir des framework JavaScript tel que VueJS ou React vous avez sûrement déjà vu le nom webpack. Mais de quoi s'agit-t-il vraiment ?
Webpack est un module bundler, il prend des modules avec des dépendances et génère des assets statiques qui peuvent ensuite être utilisé sur le navigateur.
Pourquoi un nouvel outil ?
Des outils tel que browserify permettent déjà de mettre en place des require et de générer un fichier js. Webpack propose de pousser plus loin cette approche en permettant d'inclure plusieurs types de fichier et pas seulement du JavaScript (CSS, Images, ...).
Par défaut, Webpack n'est capable de gérer que du JavaScript, mais il possède un système de loaders qui permettent transformer d'autres types de ressources en Javascript. Ainsi, chaque ressource chargée par Webpack devient un module.
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}Il possède aussi un système de plugin permettant de personnaliser un peu plus la manière de traiter le code avec la possibilité de minifier le code par exemple.
Hot Module Replacement
“Hot Module Replacement” (HMR) est une fonctionnalité qui permet d'injecter de rafraichir des modules à chaud à chaque mise à jour.
It’s like LiveReload for every module.
Pour utiliser ce système Webpack intègre un serveur de développement que l'on va pouvoir utiliser pendant que l'on travaille sur notre JavaScript. Si on met en place la gestion sur un module A qui inclue un module B qui lui même inclue un module C. Si on modifie le module C, Webpack va donc regénérer le module B (qui dépend de C) et va alors utiliser le HMR pour reinjecter le module dans A. Le tout sans rafraichir la page.
La configuration
Il est possible d'utiliser Webpack de différentes manières :
- En ligne de commande.
- En utilisant NodeJS.
- En utilisant des outils tiers tel que gulp ou grunt.
La configuration est relativement complexe, le mieux est de regarder sur différents dépôt GitHub comment la configuration de différents projets est faite.
