Assets v Webpack

V vsakem projektu so nekateri viri ali assets (assets). Ti assets predstavljajo slike, pisavne datoteke in podobne stvari.

Praviloma želimo preprosto prenesti vire iz projektske mape v mapo zgradnje. A spet se pojavi problem s predpomnilnikom. Na primer, brskalnik predpomni slike. To pomeni, da če spremenimo sliko, ne da bi spremenili ime njene datoteke, bodo uporabniki spletišča videli prejšnjo različico slike, ker je bila predpomnjenja pri njih.

Rešitev problema, kot že veste, je dodajanje zgoščene vrednosti v ime datoteke. Webpack omogoča kopiranje datotek virov v mapo zgradnje, pri tem pa jim doda zgoščene vrednosti in, kar je najpomembneje, spremeni v vseh datotekah poti do teh virov na nove.

V Webpacku se delo z assets izvaja s posebnimi assets moduli. Obstajajo štiri tipi: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource kopira datoteke iz projektske mape v mapo zgradnje in zamenja poti do njih z novimi. Modul asset/inline jemlje datoteke iz projektske mape in v kodi zgradnje zamenja poti do datotek z base64. Modul asset/source jemlje datoteke iz projektske mape in jih vrne v obliki besedilnega niza. Modul asset sam izbira, ali kopirati datoteko v mapo zgradnje ali jo spremeniti v base. Izbira se izvede odvisno od velikosti datoteke. Privzeto se datoteke večje od 8kb zgradijo v datoteke.

Splošna shema uporabe teh modulov izgleda takole:

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