Webpack - Empaquetage de l'application client

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

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation