Webpack

Des concepts de base jusqu’aux optimisations avancées, en passant par la maintenabilité et la personnalisation : la formation de référence sur ce bundler incontournable.

Objectifs

La formation Webpack vise à permettre aux apprenant·e·s de :

  • comprendre et maîtriser l’architecture de Webpack

  • intégrer des ressources de n’importe quel type dans leurs builds

  • maximiser leur productivité en optimisant leurs builds incrémentaux

  • optimiser finement le temps de démarrage de leurs applications web

  • tirer le meilleur parti des nouveaux mécanismes de cache et de parallélisation de Webpack 5

  • exploiter les nouvelles possibilités d'optimisation de Webpack 5

  • mettre en œuvre la fédération de modules de Webpack 5

Pré-requis

  • Disposer d'un ordinateur de performance suffisante, correctement configuré (notamment selon l’éventuel guide d’installation associé à la formation et indiqué au plus tard en convocation)
  • Cet ordinateur doit être équipé d'une webcam, d'un micro et d'une sortie audio
  • Disposer d'une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps (tester ici)
  • Pouvoir exécuter Zoom, soit en tant que logiciel installé, soit via le client 100% web. Le bon fonctionnement du client installé peut être testé ici.
  • Connaître les fondamentaux du HTML tels que décrits ici

  • Connaître les fondamentaux du langage JavaScript : variables, types de données, boucles, fonctions.

Programme

Premiers pas

  • Concepts fondamentaux
  • Traiter du JavaScript
  • Traiter des styles
  • Traiter des images
  • Traiter des fontes
  • Autres sources courantes
  • Ajuster pour les livrables de production

Rendre la configuration maintenable

  • webpack-merge
  • Découper les éléments de configuration
  • Approches possibles de découpe par fichiers

Optimiser l’expérience de développement

  • Tirer le meilleur parti du serveur de développement
  • Intégrer à nos propres serveurs
  • Hot Module Replacement
  • Plugins et surcouches pratiques

Optimiser la performance de build

  • Ne transpiler que le nécessaire
  • Réduire les périmètres des loaders
  • Mettre en cache les résultats des loaders
  • Choisir les bons types de sourcemaps
  • Externaliser le code tiers avec externals
  • Paralléliser le build
  • Paralléliser certains loaders
  • DllPlugin et DllReferencePlugin`

Optimiser la performance de production

  • Optimiser le nombre et les tailles de fichiers
  • Optimiser la mise en cache
  • Bundle splitting
  • Code splitting
  • Analyser la performance des bundles
  • Produire une bibliothèque plutôt qu’une app

Webpack + React

  • En développement
  • En production

Personnaliser Webpack

  • Configurations subtiles
  • Écrire nos propres loaders
  • Écrire nos propres plugins

Moyens pédagogiques et techniques, suivi et appréciation

Les apprenant·e·s reçoivent, à chaque début de période, un accès :

  • aux diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi,

  • au dépôt de départ pour le développement de l’application « fil rouge ».

Après la session, ils reçoivent par ailleurs :

  • un e-mail de debrief très fourni et riche en ressources,

  • une archive de référence, contenant les slides de toute la formation, la codebase finalisée intégralement documentée et testée, et diverses ressources complémentaires.

L’évaluation des acquis se fait en cours de formation, au moyen de la réussite des exercices interactifs.

Nous sommes désolés, aucune session n’est disponible pour cette formation

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
1 à 2 personnes1 500 € HT
3 à 5 personnes1 350 € HT
À partir de 6 personnes1 200 € HT

Vous souhaitez une formation intra entreprise ou sur mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux ou dans nos locaux.

Demander ma formation intra / sur mesure