webpack
Webpack est un outil logiciel open-source de type « module bundler » (littéralement, « groupeur de modules »), conçu pour faciliter le développement et la gestion de sites et d'applications web modernes.
| Développé par | Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, and Webpack contributors |
|---|---|
| Première version | |
| Dernière version | 5.15.0 () |
| DĂ©pĂ´t | github.com/webpack/webpack |
| Écrit en | JavaScript |
| Supporte les langages | JavaScript, HTML, CSS, JSON, YAML, ... |
| Système d'exploitation | Multiplateforme |
| Type |
JavaScript bundler (d) Bibliothèque JavaScript |
| Licence | Licence MIT |
| Site web | webpack.js.org et github.com/webpack/webpack |
Chronologie des versions
Caractéristiques
Ce logiciel permet de réaliser un certain nombre de tâches fastidieuses et répétitives liées au développement d'interfaces web (comme la gestion des dépendances, la compilation du code source, le déploiement d'applications sur des serveurs, etc.), de manière automatique[1] - [2] - [3] - [4] - [5] - [6]. Il est initialement destiné au code JavaScript, mais sa forte modularité lui permet cependant de gérer beaucoup d'autres langages de programmation, notamment à l'aide de plugins tiers permettant d'étendre ses capacités.
Son principal avantage réside dans sa gestion extensible de toute une panoplie de modules, d'outils et de langages de programmation[7], ainsi que dans sa simplicité de mise en place, très adaptable et qui peut également être entièrement paramétrée pour répondre aux besoins spécifiques d'une application.
Fonctionnement
Webpack est un outil qui sert principalement à générer des fichiers dits « compilés », à partir de fichiers sources préalablement configurés pour être intégrés au processus de traitement. Il est capable de réaliser une grande variété de tâches différentes sur les fichiers sources, permettant ainsi de répondre à beaucoup de besoins spécifiques d'applications, et ce durant les différentes phases d'évolution d'un projet (phase de développement, mise en production, etc.).
Le cœur de cet outil repose sur un système de loaders, de petites briques de logique métier intégrées à l'outil, permettant de traiter une grande variété de langages sources différents[8] - [9]. Certaines de ces briques sont intégrées à webpack par défaut (notamment en ce qui concerne les tâches liées au langage JavaScript), mais un très grand nombre de loaders sont aujourd'hui disponibles, notamment grâce à la communauté grandissante de développeurs autour de l'outil.
Environnement
Il requiert un environnement avec Node.js pour fonctionner.
Outil de serveur local
Parmi de nombreux autres outils, l'équipe de développement de webpack propose un système serveur de développement local, nommé « Webpack Dev Server ». C'est un outil très utilisé qui est avant tout destiné aux phases de développement et de tests d'une application web.
C'est un serveur de type « serveur HTTP » permettant de servir des fichiers compilés à la volée sur un navigateur web pendant la phase de développement.
Il dispose de fonctionnalités très utiles comme le « HMR » (ou Hot Module Replacement), permettant le rechargement « à chaud » du code écrit (sans rechargement de page web), une compression à la volée des fichiers servis (gzip), ou encore l'intégration native d'un système de proxy.
Notes et références
- « Web Performance Optimization with webpack », Google Developers (consulté le )
- « A Beginner’s Guide to webpack 4 and Module Bundling », SitePoint (consulté le )
- « Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost », InfoQ,‎ (lire en ligne, consulté le )
- « High-performance webpack config for front-end delivery », Codementor (consulté le )
- "Webpack 3 to Webpack 4: tips on migrating" CodiLime. Retrieved on 25 Jun 2019.
- « Débuter avec Webpack - Alsacreations », sur www.alsacreations.com (consulté le )
- « À quoi sert Webpack et comment fonctionne-t-il ? », sur Blog de NeoLynk, (consulté le )
- (en) Imran Sayed, « Webpack Loaders and Plugins », sur Medium, (consulté le )
- « Les loaders Webpack: L'exemple avec Sass ! », sur blogs.infinitesquare.com (consulté le )