Assets în Webpack

În fiecare proiect există unele resurse sau assets (assets). Aceste assets reprezintă imagini, fișiere de font și lucruri asemănătoare.

De regulă, dorim pur și simplu să transferăm resursele din folderul proiectului în folderul de build. Dar din nou apare problema cu cache-ul. De exemplu, browserul cache-uiește imaginile. Aceasta înseamnă că dacă modificăm imaginea, fără a schimba numele fișierului ei, atunci utilizatorii site-ului vor vedea versiunea anterioară a imaginii, deoarece aceasta le-a fost cache-uită.

Soluția problemei, după cum știți deja, este adăugarea unui hash în numele fișierului. Webpack permite copierea fișierelor de resurse în folderul de build, adăugând în același timp hash-uri și, cel mai important, schimbând în toate fișierele căile către aceste resurse pe cele noi.

În Webpack, lucrul cu assets este realizat cu ajutorul unor module speciale de assets. Sunt patru tipuri: asset/resource, asset/inline, asset/source, asset.

Modulul asset/resource copiază fișierele din folderul proiectului în folderul de build și înlocuiește căile către ele cu altele noi. Modulul asset/inline ia fișierele din folderul proiectului și în codul de build înlocuiește căile către fișiere cu base64. Modulul asset/source ia fișierele din folderul proiectului și le returnează sub formă de șir text. Modulul asset alege singur dacă să copieze fișierul în folderul de build sau să îl transforme în base64. Alegerea se face în funcție de dimensiunea fișierului. Implicit, fișierele mai mari de 8kb sunt colectate în fișiere.

Schema generală de aplicare a acestor module arată astfel:

module: {
	rules: [
		{
			test: /\.png$/,        // fișiere
			type: 'asset/resource' // tipul modulului
		}
	]
},

Explicați ce se înțelege prin assets.

Căutați pe internet ce este base64 și cum este folosit în CSS.

Enumerați 4 tipuri de module pentru assets.

Explicați la ce este destinat fiecare dintre cele 4 tipuri de module.