Assets dalam Webpack

Dalam setiap projek, terdapat beberapa sumber atau aset (assets). Aset-aset ini terdiri daripada imej, fail fon dan perkara-perkara seumpamanya.

Biasanya, kita hanya mahu memindahkan sumber dari folder projek ke folder binaan. Tetapi sekali lagi, masalah cache timbul. Sebagai contoh, pelayar meng-cache imej. Ini bermakna jika kita menukar imej, tanpa menukar nama failnya, maka pengguna laman web akan melihat versi sebelumnya imej, kerana ia telah di-cache.

Penyelesaian kepada masalah ini, seperti yang anda sudah tahu, ialah dengan menambah hash pada nama fail. Webpack membenarkan menyalin fail sumber ke folder binaan, sambil menambah hash kepada mereka, dan yang paling penting, menukar dalam semua fail laluan kepada sumber ini kepada yang baru.

Dalam Webpack, kerja dengan aset dilakukan menggunakan modul aset khas. Terdapat empat jenis: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource menyalin fail dari folder projek ke folder binaan dan menggantikan laluan kepada mereka dengan yang baru. Modul asset/inline mengambil fail dari folder projek dan dalam kod binaan menggantikan laluan ke fail dengan base64. Modul asset/source mengambil fail dari folder projek dan mengembalikannya dalam bentuk rentetan teks. Modul asset sendiri memilih, untuk menyalin fail ke folder binaan atau mengubahnya kepada base. Pilihan dibuat bergantung pada saiz fail. Secara lalai, fail lebih daripada 8kb dibina ke dalam fail.

Skema umum untuk menggunakan modul-modul ini kelihatan seperti berikut:

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

Terangkan apa yang difahami sebagai aset.

Google, apa itu base64 dan bagaimana ia digunakan dalam CSS.

Senaraikan 4 jenis modul untuk aset.

Terangkan, untuk apa setiap satu daripada 4 jenis modul ini ditujukan.