webpack

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#edit

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#edit

Il requiert un environnement avec Node.js pour fonctionner.

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, dynamique), une compression à la volée des fichiers servis (gzip), ou encore l'intégration native d'un système de proxy.

Articles connexes#edit

• Grunt (logiciel)
• Gulp.js
• Node.js
• Vite (logiciel)
• Bun (logiciel)

Liens externes#edit

• (en) Site officiel

1. ^ « Web Performance Optimization with webpack », Google Developers (consulté le 16 octobre 2018)
2. ^ « A Beginner’s Guide to webpack 4 and Module Bundling », SitePoint (consulté le 16 octobre 2018)
3. ^ « Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost », InfoQ,‎ 2018 (lire en ligne, consulté le 16 octobre 2018)
4. ^ « High-performance webpack config for front-end delivery », Codementor (consulté le 16 octobre 2018)
5. ^ "Webpack 3 to Webpack 4: tips on migrating" CodiLime. Retrieved on 25 Jun 2019.
6. ^ « Débuter avec Webpack - Alsacreations », sur www.alsacreations.com (consulté le 4 septembre 2021)
7. ^ « À quoi sert Webpack et comment fonctionne-t-il ? », sur Blog de NeoLynk, 20 novembre 2019 (consulté le 4 septembre 2021)
8. ^ (en) Imran Sayed, « Webpack Loaders and Plugins », sur Medium, 25 mars 2019 (consulté le 14 septembre 2021)
9. ^ « Les loaders Webpack: L'exemple avec Sass ! », sur blogs.infinitesquare.com (consulté le 14 septembre 2021)

• Portail des logiciels libres