Séance 4
Découverte de Webpack pour organiser ses assets
Webpack est un automatiseur (ou encore module bundler) de tâches, pour le "front", qui vous permet de fusionner plusieurs fichiers CSS, plusieurs fichiers javascript, de minifier le JS ou le CSS, de transformer du code typeScript, Ecmas, ... en du javascript compréhensible par tous les navigateurs, de compiler du SCC/SASS en du CSS, ...
Pour fonctionner, vous devez avoir NodeJs d'installé sur votre serveur (ou dans votre environnement de travail)
Principe de fonctionnement
Comme le montre le schéma ci-dessus, l'intérêt de Webpack est de prendre tous les éléments de votre projet (avec les dépendances, les différents formats, ...) et de les préparer, compiler, optimiser pour vous donner en sortie, les formats standards pour les navigateurs (JS, CSS, et images).
Première mise en place
Pré-requis
Installer NodeJs (version 10.13 minimum). Pour vous en assurer
Normalement NPM est installé automatiquement avec NodeJS (mais vous pouvez aussi utiliser Yarn)
Si votre projet n'est pas encore gérer avec npm (vous n'avez pas de gestion de dépendance, et donc pas de package.json à la racine de votre projet), vous devez initialiser votre répertoire
Et ensuite installer Webpack :
L'idée est ensuite d'avoir un fichier qui va regrouper toutes les dépendances (souvent nommé index.js ou app.js), c'est ce fichier que WebPack utilisera pour "comprendre" votre projet.
Première utilisation
Pour une première mise en place, on peut se baser sur le guide officiel ici : https://webpack.js.org/guides/getting-started/
Dans ce guide vous trouverez comment mettre en place le fichier de configuration de webpack (webpack.config.js) qui sera l'élément principal de la configuration.
Et ensuite ?
A ce stade de la configuration Webpack ne gère pas encore beaucoup de choses. Uniquement le JS, mais sans minification, pas de CSS, ...
Il va donc falloir ajouter les règles (des loaders) pour les différents éléments que vous souhaitez gérer.
CSS
Et la minification du CSS
Si vous travailler avec du SASS/SCSS, il vous faudra expliquer à webpack comment le compiler en du CSS :
Vous pouvez gérer de la même manière vos images, vos polices, ...
Quelques ressources
Configuration d'un projet complet avec Webpack 5
Un autre tuto, écrit et pas à pas :
Une série de tutos sur Webpack 4 en français
Attention cette série de vidéo est faite avec Webpack 4. Il peut y avoir des changements plus ou moins importants avec Webpack 5. (voir ici : https://webpack.js.org/migrate/5/)
Alternatives à Webpack
Webpack est sans doute la solution la plus connue actuellement, mais aussi probablement la plus complexe (parce que très complète).
Avant Webpack, beaucoup d'autres solutions existaient, et vous pourrez rencontrer par exemple :
Chacun apportant son interprétation et sa complexité, mais répondant généralement parfaitement aux besoins basiques (compressions, fusion, traduction de code).
Last updated
