Assets di Webpack

Dalam setiap proyek terdapat beberapa sumber daya atau assets (assets). Assets ini berupa gambar, file font, dan hal-hal serupa lainnya.

Biasanya, kita ingin memindahkan sumber daya dari folder proyek ke folder build. Tapi sekali lagi muncul masalah dengan cache. Misalnya, browser meng-cache gambar. Artinya, jika kita mengubah gambar, tanpa mengubah nama file-nya, maka pengguna situs akan melihat versi sebelumnya dari gambar tersebut, karena gambar itu telah di-cache.

Solusi untuk masalah ini, seperti yang sudah Anda ketahui, adalah dengan menambahkan hash ke nama file. Webpack memungkinkan untuk menyalin file sumber daya ke folder build, sambil menambahkan hash kepada mereka, dan yang paling penting, mengubah di semua file path menuju sumber daya tersebut menjadi yang baru.

Di Webpack, pekerjaan dengan assets dilakukan dengan menggunakan modul assets khusus. Ada empat tipe: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource menyalin file dari folder proyek ke folder build dan mengganti path menuju mereka dengan yang baru. Modul asset/inline mengambil file dari folder proyek dan dalam kode build mengganti path ke file dengan base64. Modul asset/source mengambil file dari folder proyek dan mengembalikannya dalam bentuk string teks. Modul asset sendiri memilih, menyalin file ke folder build atau mengubahnya menjadi base. Pemilihan dilakukan tergantung pada ukuran file. Secara default, file di atas 8kb di-build menjadi file.

Skema umum penerapan modul-modul ini terlihat sebagai berikut:

module: {
	rules: [
		{
			test: /\.png$/,        // file
			type: 'asset/resource' // tipe modul
		}
	]
},

Jelaskan apa yang dimaksud dengan assets.

Cari di Google, apa itu base64 dan bagaimana penggunaannya di CSS.

Sebutkan 4 tipe modul untuk assets.

Jelaskan, untuk apa masing-masing dari 4 tipe modul tersebut ditujukan.