Assets u Webpack-u

U svakom projektu postoje neki resursi ili assets (assets). Ovi asseti predstavljaju slike, fajlove fontova i tome slične stvari.

U pravilu, želimo jednostavno da prenesemo resurse iz projekat fascikle u build fasciklu. Ali opet se javlja problem sa kešom. Na primer, brauzer kešira slike. To znači da ako promenimo sliku na slici, a ne promenimo ime njenog fajla, onda korisnici sajta videće prethodnu verziju slike, pošto im je ona zakeširana.

Rešenje problema, kao što već znate, je dodavanje heša u ime fajla. Webpack omogućava kopiranje fajlova resursa u build fasciklu, dodajući im pritom heševe i, što je najvažnije, menjajući u svim fajlovima putanje do ovih resursa na nove.

U Webpack-u rad sa assetima se obavlja pomoću specijalnih assets-modula. Postoje četiri tipa: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource kopira fajlove iz projekat fascikle u build fasciklu i zamenjuje putanje do njih na nove. Modul asset/inline uzima fajlove iz projekat fascikle i u kodu build-a zamenjuje putanje do fajlova na base64. Modul asset/source uzima fajlove iz projekat fascikle i vraća ih u vidu tekstualnog stringa. Modul asset sam bira, da li kopirati fajl u build fasciklu ili ga pretvoriti u base. Izbor se vrši u zavisnosti od veličine fajla. Podrazumevano, fajlovi veći od 8kb se sakupljaju u fajlove.

Opšta shema primene ovih modula izgleda na sledeći način:

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