📦 Webpack: À quoi ça sert et comment s’en servir ?

Webpack est ce qu’on appelle un module bundler. Technologie principalement utilisée en front-end, elle va permettre de rassembler tous les fichiers de votre code source et les rassembler en un seul fichier. Cela va des fichiers javascript jusqu’aux images en passant par les fichiers css. Webpack va permettre également d’optimiser le poids de notre code source et donc contribuer aux bonnes perforances de votre application. Dans ce cours, vous allez pouvoir voir comment initialiser, configurer et mettre en place Webpack. Vous pouvez également retrouver d’autres cours autour du web et de la création d’application sur la chaîne Youtube.

1 — Introduction: Explications sur à quoi sert Webpack et présentation des vidéos suivantes.

2 — Installation & utilisation des lignes de commandes: Installation de Webpack et démonstration de comment utiliser Webpack depuis les lignes de commandes.

3 — Importation de modules: Dans cette vidéo, on va voir comment importer des modules de la même manière que Node et comment Webpack fait pour gérer l’importation des modules.

4 —Utilisation d’un fichier de configuration: Dans cette vidéo, on va voir comment utiliser un fichier de configuration plutôt que les lignes de commande pour utiliser Webpack.

5 — Web Server et Auto Rafraîchissement: Dans cette vidéo, on va voir comment utiliser Webpack Dev Server pour améliorer le confort de développement et activer le rafraîchissement automatique lorsque des fichiers sont modifiés.

6— Compilation pour la mise en production: Dans cette vidéo, on va créer un script dédié à la compilation. On verra comment lancer Webpack depuis un fichier Node plutôt que via les lignes de commandes.

7— Importation d’image avec les modules loaders: Dans cette vidéo, on va voir comment utiliser les module loaders pour notamment importer et utiliser des images directement dans un fichier Javascript.

8 — Importation de fichier CSS: Dans cette vidéo, on va voir comment utiliser les module loaders pour notamment importer et injecter du CSS dans nos pages de manière dynamique.

9 — Conclusion: Résumé du cours et annonce de la suite du cours sur Webpack.

Dans les prochains cours liés à Webpack, on verra utiliser des plugins pour améliorer les performances de notre site, et on apprendra également à créer nos propres plugins.

Je vous remercie d’avoir lu cet article et j’espère qu’il vous aura plu. Je vous invite à faire des remarques ou des suggestions dans les commentaires.