Assets dans Webpack

Chaque projet possède certaines ressources ou assets (assets). Ces assets représentent des images, des fichiers de polices et des choses semblables.

En règle générale, nous voulons simplement transférer les ressources du dossier du projet vers le dossier de build. Mais le problème du cache se pose à nouveau. Par exemple, le navigateur met les images en cache. Cela signifie que si nous modifions l'image, sans changer le nom de son fichier, les utilisateurs du site verront la version précédente de l'image, car elle a été mise en cache chez eux.

La solution au problème, comme vous le savez déjà, est d'ajouter un hash au nom du fichier. Webpack permet de copier les fichiers de ressources dans le dossier de build, en leur ajoutant des hashs et, surtout, en modifiant dans tous les fichiers les chemins vers ces ressources pour les mettre à jour.

Dans Webpack, le travail avec les assets est réalisé à l'aide de modules assets spéciaux. Il en existe quatre types : asset/resource, asset/inline, asset/source, asset.

Le module asset/resource copie les fichiers du dossier du projet vers le dossier de build et remplace les chemins vers eux par de nouveaux. Le module asset/inline prend les fichiers du dossier du projet et dans le code de build remplace les chemins vers les fichiers par base64. Le module asset/source prend les fichiers du dossier du projet et les retourne sous forme de chaîne de texte. Le module asset choisit lui-même de copier le fichier dans le dossier de build ou de le transformer en base. Le choix s'effectue en fonction de la taille du fichier. Par défaut, les fichiers de plus de 8kb sont compilés en fichiers.

Le schéma général d'application de ces modules se présente comme suit :

module: {
	rules: [
		{
			test: /\.png$/,        // fichiers
			type: 'asset/resource' // type de module
		}
	]
},

Expliquez ce que l'on entend par assets.

Recherchez ce qu'est le base64 et comment il est utilisé en CSS.

Énumérez 4 types de modules pour les assets.

Expliquez à quoi est destiné chacun des 4 types de modules.