Assets Webpackissa

Jokaisessa projektissa on tiettyjä resursseja tai assets (assets). Nämä assetit ovat kuvia, fonttitiedostoja ja vastaavia asioita.

Yleensä haluamme vain siirtää resurssit projektikansiosta build-kansioon. Mutta taas kerran ongelmana on välimuisti. Esimerkiksi selain tallentaa kuvia välimuistiin. Tämä tarkoittaa, että jos muutamme kuvaa, mutta emmuuta sen tiedoston nimeä, käyttäjät näkevät edellisen version kuvasta, koska se on heidän välimuistissaan.

Ongelman ratkaisu, kuten jo tiedät, on hashin lisääminen tiedostonimeen. Webpack mahdollistaa tiedostojen kopioimisen asset-kansioon build-kansioon, lisäten niihin samalla hasheja ja, mikä tärkeintä, muuttaen kaikissa tiedostoissa polkuja näihin resursseihin uusiin.

Webpackissa assetien käsittely toteutetaan erityisillä asset-moduuleilla. Niitä on neljä tyyppiä: asset/resource, asset/inline, asset/source, asset.

Moduuli asset/resource kopioi tiedostot projektikansiosta build-kansioon ja korvaa polut niihin uusiin. Moduuli asset/inline ottaa tiedostot projektikansiosta ja build-koodissa korvaa tiedostopolut base64:llä. Moduuli asset/source ottaa tiedostot projektikansiosta ja palauttaa ne tekstimerkkijonona. Moduuli asset valitsee itse, kopioidaanko tiedosto build-kansioon vai muunnetaanko se base64:ksi. Valinta tehdään riippuen tiedoston koosta. Oletusarvoisesti tiedostot, jotka ovat yli 8kb, kootaan tiedostoiksi.

Näiden moduulien yleinen käyttökaavio on seuraava:

module: {
	rules: [
		{
			test: /\.png$/,        // tiedostot
			type: 'asset/resource' // moduulin tyyppi
		}
	]
},

Kerro, mitä assetilla tarkoitetaan.

Googlettakaa, mitä base64 on ja miten sitä käytetään CSS:ssä.

Luettele 4 asset-moduulien tyyppiä.

Kerro, mihin kukin 4:stä moduulityypeistä on tarkoitettu.