Webpack - Empaquetage de l'application client

A l'issue de cette formation, vous serez capable de :

• Utiliser l'outil Webpack
• Gérer des dépendances et créer un "exécutable" local pour le suivi des applications
• Fournir une approche modulaire de l'application front avec Webpack
• Suivre un développement à l'image d'un développement serveur.

Introduction à Webpack

• Installation de Webpack
• Comprendre la notion de module, de bundle et de dépendance dans Webpack
• Utilisation de Webpack en mode ligne de commande
• Utilisation de Webpack avec un fichier de configuration
• Comparaison avec Browserify, Gulp et Grunt

Exemples de travaux pratiques (à titre indicatif)

• Découverte des divers modes d'installation de Webpack
• Lancement de Webpack en mode ligne de commande

Présentation de Webpack

• La notion de loader dans Webpack
• Présentation des modules dans Webpack
• Notion de plug-ins et disponibilité de ceux-ci
• Configuration simple pour commencer
• Le watch mode
• Installer le Webpack devServer
• Le build incrémental
• Le Hot Module Reload

Exemples de travaux pratiques (à titre indicatif)

• Création d'une première configuration Webpack
• Installation du Webpack devServer, mise en place de build incrémental

Lancer la production de code avec Webpack

• Les plug-ins Webpack
• Un exemple avec la minification
• Comprendre la structure d'un bundle
• Utiliser le "tree shaking" (suppression des codes morts)
• Le code splitting, synchrone et asynchrone

Exemple de travaux pratiques (à titre indicatif)

• Génération d'un bundle à partir de multiples fichiers

Les loaders

• Le graphe de dépendances
• Qu'est-ce qu'un Webpack Loader ?
• Gestion des images Webpack
• Manipuler des CSS avec Webpack
• JavaScript et Webpack
• Ecrire un loader

Exemple de travaux pratiques (à titre indicatif)

• Ecriture d'un Webpack Loader