Assets ve Webpacku

Každý projekt má nějaké zdroje nebo assety (assets). Tyto assety představují obrázky, soubory fontů a podobné věci.

Zpravidla chceme jednoduše přenést zdroje z projektové složky do složky sestavení. Ale znovu narážíme na problém s mezipamětí. Například prohlížeč ukládá obrázky do mezipaměti. To znamená, že pokud změníme obrázek, aniž bychom změnili název jeho souboru, uživatelé webu uvidí předchozí verzi obrázku, protože se jim uložila do mezipaměti.

Řešením problému, jak již víte, je přidání hashe do názvu souboru. Webpack umožňuje kopírovat soubory zdrojů do složky sestavení, přidat im přitom hashe a, co je nejdůležitější, změnit ve všech souborech cesty k těmto zdrojům na nové.

Ve Webpacku se práce s assety provádí pomocí speciálních asset modulů. Existují čtyři typy: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource kopíruje soubory z projektové složky do složky sestavení a nahrazuje cesty k nim novými. Modul asset/inline bere soubory z projektové složky a v kódu sestavení nahrazuje cesty k souborům na base64. Modul asset/source bere soubory z projektové složky a vrací je ve formě textového řetězce. Modul asset sám volí, zkopírovat soubor do složky sestavení nebo jej převést na base. Volba se provádí v závislosti na velikosti souboru. Ve výchozím nastavení se soubory větší než 8kb sestavují jako soubory.

Obecné schéma použití těchto modulů vypadá následovně:

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