Assets a Webpackban

Minden projektben vannak bizonyos erőforrások vagy assetek (assets). Ezek az assetek képeket, betűfájlokat és hasonló dolgokat jelentenek.

Általában csak egyszerűen át szeretnénk vinni az erőforrásokat a projekt mappájából a build mappába. De ismét felmerül a gyorsítótár problémája. Például a böngésző gyorsítótárazza a képeket. Ez azt jelenti, hogy ha megváltoztatjuk a képet anélkül, hogy megváltoztatnánk a fájlnevét, akkor a weboldal felhasználói a kép előző verzióját fogják látni, mert az gyorsítótárazva lett náluk.

A probléma megoldása, amint már tudjátok, a hash hozzáadása a fájlnévhez. A Webpack lehetővé teszi a fájlok másolását az erőforrásokból a build mappába, miközben hozzáadja a hash-eket, és ami a legfontosabb, megváltoztatja az összes fájlban ezekhez az erőforrásokhoz vezető utakat az újakra.

A Webpackban az assetekkel való munka különleges asset modulok segítségével történik. Négy típusuk van: asset/resource, asset/inline, asset/source, asset.

A(z) asset/resource modul másolja a fájlokat a projekt mappájából a build mappába, és lecseréli a hozzájuk vezető utakat újakra. A(z) asset/inline modul kiveszi a fájlokat a projekt mappájából, és a build kódjában lecseréli a fájlokhoz vezető utakat base64 formátumra. A(z) asset/source modul kiveszi a fájlokat a projekt mappájából, és visszaadja azokat szöveges karakterlánc formájában. A(z) asset modul maga dönti el, hogy másolja a fájlt a build mappába, vagy alakítja át base64 formátumra. A választás a fájl méretétől függően történik. Alapértelmezetten a 8kb-nál nagyobb fájlok fájlokká lesznek összeállítva.

Ezen modulok alkalmazásának általános sémája a következőképpen néz ki:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // fájlok
      type: 'asset/resource' // modul típusa
    }
  ]
},