Assets in Webpack
In elk project zijn er een aantal bronnen of assets (assets). Deze assets zijn afbeeldingen, fontbestanden en dergelijke dingen.
Over het algemeen willen we eenvoudigweg bronnen van de projectmap naar de build-map kopiëren. Maar opnieuw is er een probleem met de cache. Bijvoorbeeld, de browser cached afbeeldingen. Dit betekent dat als we een afbeelding wijzigen zonder de bestandsnaam te veranderen, dan zullen gebruikers van de site de vorige versie van de afbeelding zien, omdat deze bij hen gecached is.
De oplossing voor het probleem, zoals je al weet, is het toevoegen van een hash aan de bestandsnaam. Webpack maakt het mogelijk om bestanden van bronnen naar de build-map te kopiëren, terwijl er hashes aan worden toegevoegd en, het belangrijkste, alle paden naar deze bronnen in alle bestanden worden vervangen door nieuwe.
In Webpack wordt gewerkt met assets
met behulp van speciale assets-modules.
Er zijn vier types: asset/resource,
asset/inline, asset/source,
asset.
De module asset/resource kopieert bestanden
van de projectmap naar de build-map en vervangt
paden ernaar door nieuwe.
De module asset/inline neemt bestanden
uit de projectmap en vervangt in de build-code
de paden naar bestanden door base64.
De module asset/source neemt bestanden
uit de projectmap en retourneert ze
als een tekststring.
De module asset kiest zelf of het bestand
naar de build-map gekopieerd moet worden of
omgezet moet worden naar base. De keuze wordt
gemaakt afhankelijk van de bestandsgrootte.
Standaard worden bestanden groter dan
8kb samengesteld in bestanden.
De algemene schematische toepassing van deze modules ziet er als volgt uit:
module: {
rules: [
{
test: /\.png$/, // bestanden
type: 'asset/resource' // moduletype
}
]
},
Leg uit wat wordt verstaan onder assets.
Zoek op wat base64 is en hoe het wordt gebruikt in CSS.
Noem de 4 types modules voor assets.
Leg uit waarvoor elk van de
4 types modules bedoeld is.
