Assets i Webpack

I hvert prosjekt er det noen ressurser eller assets (assets). Disse assetene kan være bilder, skriftfiler og lignende ting.

Som regel ønsker vi bare å overføre ressursene fra prosjektmappen til byggemappen. Men igjen oppstår problemet med cache. For eksempel, nettleseren cacher bilder. Dette betyr at hvis vi endrer et bilde uten å endre filnavnet, vil brukerne av nettstedet se den forrige versjonen av bildet, fordi den er buffret hos dem.

Løsningen på problemet, som du allerede vet, er å legge til en hash i filnavnet. Webpack gjør det mulig å kopiere filer av ressurser til byggemappen, og legge til hash for dem, og, viktigst av alt, endre stiene til disse ressursene i alle filer til de nye.

I Webpack håndteres assets ved hjelp av spesielle asset-moduler. Det er fire typer: asset/resource, asset/inline, asset/source, asset.

Modulen asset/resource kopierer filer fra prosjektmappen til byggemappen og erstatter stiene til dem med nye. Modulen asset/inline tar filer fra prosjektmappen og i byggekoden erstatter stiene til filene med base64. Modulen asset/source tar filer fra prosjektmappen og returnerer dem som en tekststreng. Modulen asset velger selv om den skal kopiere filen til byggemappen eller gjøre den om til base. Valget gjøres avhengig av filens størrelse. Som standard blir filer større enn 8kb bygget til filer.

Den generelle opplegget for bruk av disse modulene ser slik ut:

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

Forklar hva som menes med assets.

Søk på hva base64 er og hvordan det brukes i CSS.

List opp 4 typer moduler for assets.

Forklar hva hver av de 4 modultyper er beregnet på.