К содержанию

Tutoriel Webpack 5

Un tutoriel compréhensible sur le bundler Webpack avec de la théorie et des exercices pour les débutants.

Fondamentaux

Principe de fonctionnement du bundler Webpack

Problème de cache dans les navigateurs

Webpack via les modules ES dans Webpack

Installation de Webpack

Configuration initiale du bundler Webpack

Configuration du lancement de la build Webpack

Test de build avec Webpack

Connexion du bundle au markup dans Webpack

Importation de fichiers dans le point d'entrée Webpack

Chemins absolus dans Webpack

Plugins dans Webpack

Loaders dans Webpack

Modes de construction

Types de modes de construction dans Webpack

Changer le mode de build dans le fichier de configuration Webpack

Modes de build via les scripts dans Webpack

Compilation automatique avec Webpack

Points d'entrée et de sortie

Points d'entrée et de sortie dans Webpack

Point de sortie dans Webpack

Points d'entrée multiples dans Webpack

Hash dans le fichier de build dans Webpack

Noms des points d'entrée dans Webpack

Points d'entrée nommés sous forme de tableaux dans Webpack

Noms des fichiers de build dans Webpack

Noms et hachage des fichiers de build dans Webpack

Chemin vers le dossier de build dans Webpack

Contexte des points d'entrée dans Webpack

Styles

Import de styles CSS dans Webpack

Chargeurs pour les feuilles de style CSS dans Webpack

Configuration de l'import des styles CSS dans Webpack

Test de l'importation de styles CSS dans Webpack

Configuration de la compilation CSS en bundle dans Webpack

Test de la construction du bundle CSS dans Webpack

Nom du fichier de bundle CSS dans Webpack

Hachage du bundle CSS dans Webpack

Plusieurs bundles CSS dans Webpack

Intégration de bibliothèques CSS dans Webpack

Travailler avec LESS dans Webpack

Travailler avec SASS dans Webpack

HTML

Travailler avec les maquettes HTML dans Webpack

Génération de maquette HTML dans Webpack

Plusieurs bundles de scripts dans un layout avec Webpack

Bundles de scripts avec hachage dans le layout avec Webpack

Bundles de styles dans la mise en page avec Webpack

Plusieurs bundles de styles dans un layout Webpack

Votre propre fichier de mise en page dans Webpack

Actifs

Assets dans Webpack

Les assets dans les bundles JavaScript avec Webpack

Les assets dans les bundles CSS avec Webpack

Personnalisation du chemin des fichiers assets dans Webpack

Personnalisation du chemin vers les groupes d'assets dans Webpack

Assets Inline dans Webpack

Source assets dans Webpack

Ressources partagées dans Webpack

Plugins

Nettoyage du dossier de build dans Webpack

Copie de fichiers dans Webpack