Assets v Webpacku

Každý projekt má nejaké zdroje alebo assets (assets). Tieto assety predstavujú obrázky, súbory písma a podobné veci.

Spravidla chceme jednoducho preniesť zdroje z priečinka projektu do priečinka zostavy. Ale opäť vzniká problém s vyrovnávacou pamäťou. Napríklad prehliadač ukladá obrázky do vyrovnávacej pamäte. To znamená, že ak zmeníme obrázok bez zmeny názvu jeho súboru, používatelia webstránky uvidia predchádzajúcu verziu obrázka, pretože sa im uložila do vyrovnávacej pamäte.

Riešením problému, ako už viete, je pridanie hašu do názvu súboru. Webpack umožňuje kopírovať súbory zdrojov do priečinka zostavy, pričom im pridáva haše a, čo je najdôležitejšie, mení vo všetkých súboroch cesty k týmto zdrojom na nové.

V Webpacke sa práca s assetmi vykonáva pomocou špeciálnych assets modulov. Existujú štyri typy: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource kopíruje súbory z priečinka projektu do priečinka zostavy a nahrádza cesty k nim novými. Modul asset/inline berie súbory z priečinka projektu a v kóde zostavy nahrádza cesty k súborom formátom base64. Modul asset/source berie súbory z priečinka projektu a vracia ich v podobe textového reťazca. Modul asset sám vyberá, či kopírovať súbor do priečinka zostavy, alebo ho premeniť na base. Výber sa vykonáva v závislosti od veľkosti súboru. Predvolene sa súbory väčšie ako 8kb ukladajú ako súbory.

Všeobecná schéma použitia týchto modulov vyzerá nasledovne:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // súbory
      type: 'asset/resource' // typ modulu
    }
  ]
},