Асети у Webpack-у

У сваком пројекту постоје одређени ресурси или асети (assets). Ови асети представљају слике, фајлове фонтова и слично.

Обично желимо да једноставно преместимо ресурсе из фасцикле пројекта у фасциклу за изградњу. Али опет се појављује проблем са кешом. На пример, прегледач кешира слике. То значи да ако променимо слику, а не променимо име њеног фајла, корисници сајта ће видети претходну верзију слике, јер им је она закеширана.

Решење проблема, као што већ знате, је додавање хеша у име фајла. Webpack омогућава копирање фајлова ресурса у фасциклу за изградњу, додајући им притом хеш и, што је најважније, мењајући у свим фајловима путеве до ових ресурса на нове.

У Webpack-у рад са асетима се обавља помоћу специјалних assets-модула. Постоје четири типа: asset/resource, asset/inline, asset/source, asset.

Модул asset/resource копира фајлове из фасцикле пројекта у фасциклу за изградњу и замењује путеве до њих новима. Модул asset/inline узима фајлове из фасцикле пројекта и у коду за изградњу замењује путеве до фајлова на base64. Модул asset/source узима фајлове из фасцикле пројекта и враћа их у облику текстуалног стринга. Модул asset сам бира да ли да копира фајл у фасциклу за изградњу или да га претвори у base. Избор се обавља у зависности од величине фајла. Подразумевано се фајлови већи од 8kb претварају у посебне фајлове.

Општа шема примене ових модула изгледа овако:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // фајлови
      type: 'asset/resource' // тип модула
    }
  ]
},