Assets Webpackis

Igas projektis on mõned ressursid või assets (assets). Need assets on pildid, fondifailid ja muud sarnased asjad.

Tavaliselt tahame lihtsalt liigutada ressursse projekti kaustast build kausta. Kuid taas tekib vahemälu probleem. Näiteks brauser vahemälustab pilte. See tähendab, et kui me muudame pilti, muutmata selle failinime, siis saidi kasutajad näevad eelmist versiooni pildist, kuna see on neil vahemällu jäänud.

Probleemi lahenduseks, nagu te juba teate, on räsi lisamine failinime. Webpack võimaldab kopeerida failid ressurssidest build kausta, lisades neile samal ajal räsi ja, mis kõige tähtsam, muutes kõikides failides teed nende ressursside juurde uutele.

Webpackis tegeletakse assetidega spetsiaalsete assets-moodulite abil. Neid on nelja tüüpi: asset/resource, asset/inline, asset/source, asset.

Moodul asset/resource kopeerib failid projekti kaustast build kausta ja asendab teed nende juurde uutega. Moodul asset/inline võtab failid projekti kaustast ja build koodis asendab teed failidele base64. Moodul asset/source võtab failid projekti kaustast ja tagastab need tekstilise stringina. Moodul asset valib ise, kas kopeerida fail build kausta või muuta see base-ks. Valik tehakse sõltuvalt faili suurusest. Vaikimisi failid üle 8kb kogutakse failidesse.

Nende moodulite rakendamise üldine skeem näeb välja järgmine:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // failid
      type: 'asset/resource' // mooduli tüüp
    }
  ]
},