Assets i Webpack

I varje projekt finns det vissa resurser eller assets (assets). Dessa assets är bilder, teckensnittsfiler och liknande saker.

Som regel vill vi helt enkelt flytta resurser från projektmappen till byggmappen. Men återigen uppstår problemet med cache. Till exempel cachar webbläsaren bilder. Det betyder att om vi ändrar bilden utan att ändra dess filnamn, så kommer användarna på webbplatsen att se den tidigare versionen av bilden, eftersom den är cachad hos dem.

Lösningen på problemet, som du redan vet, är att lägga till ett hash-värde i filnamnet. Webpack gör det möjligt att kopiera resursfiler till byggmappen, och lägga till hash-värden till dem, och, viktigast av allt, ändra sökvägarna till dessa resurser i alla filer till de nya.

I Webpack hanteras assets med speciella asset-moduler. Det finns fyra typer: asset/resource, asset/inline, asset/source, asset.

Modulen asset/resource kopierar filer från projektmappen till byggmappen och ersätter sökvägarna till dem med nya. Modulen asset/inline tar filer från projektmappen och i byggkoden ersätter den sökvägarna till filerna med base64. Modulen asset/source tar filer från projektmappen och returnerar dem som en textsträng. Modulen asset väljer själv om den ska kopiera filen till byggmappen eller omvandla den till base. Valet görs beroende på filens storlek. Som standard samlas filer större än 8kb in som filer.

Det allmänna schemat för att använda dessa moduler ser ut som följande:

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

Beskriv vad som menas med assets.

Sök på nätet efter vad base64 är och hur det används i CSS.

Lista de 4 typerna av moduler för assets.

Beskriv vad var och en av de 4 modultyperna är avsedda för.