Assets i Webpack

I hvert projekt er der visse ressourcer eller assets (assets). Disse assets repræsenterer billeder, skriftfiler og lignende ting.

Som regel ønsker vi blot at overføre ressourcer fra projektmappen til build-mappen. Men igen opstår der et problem med cachen. For eksempel cacher browseren billeder. Det betyder, at hvis vi ændrer billedet uden at ændre dens filnavn, vil brugerne af webstedet se den forrige version af billedet, da den er blevet cachet hos dem.

Løsningen på problemet, som du allerede ved, er at tilføje en hash til filnavnet. Webpack gør det muligt at kopiere filer af ressourcer til build-mappen, tilføje hashes til dem og, vigtigst af alt, ændre stierne til disse ressourcer i alle filer til de nye.

I Webpack håndteres assets ved hjælp af specielle assets-moduler. Der er fire typer: asset/resource, asset/inline, asset/source, asset.

Modulet asset/resource kopierer filer fra projektmappen til build-mappen og erstatter stierne til dem med nye. Modulet asset/inline tager filer fra projektmappen og i build-koden erstatter stier til filer med base64. Modulet asset/source tager filer fra projektmappen og returnerer dem som en tekststreng. Modulet asset vælger selv, om den skal kopiere filen til build-mappen eller omdanne den til base. Valget foretages afhængigt af filstørrelsen. Som standard bliver filer over 8kb samlet til filer.

Den generelle skema for anvendelse af disse moduler ser ud som følger:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // filer
      type: 'asset/resource' // modul type
    }
  ]
},