Webpack တွင် Assets များ

ပရောဂျက်တိုင်းတွင် အရင်းအမြစ် (resources) သို့မဟုတ် အဆင် (assets) (assets) အချို့ရှိပါသည်။ ဤအဆင်များသည် ရုပ်ပုံများ၊ ဖောင့်ဖိုင်များနှင့် အလားတူအရာများဖြစ်သည်။

ပုံမှန်အားဖြင့်၊ ကျွန်ုပ်တို့သည် အရင်းအမြစ်များကို ပရောဂျက်ဖိုလ်ဒါမှ ထုတ်လုပ်သည့်ဖိုလ်ဒါသို့ ရွှေ့ပြောင်းလိုကြသည်။ သို့သော် cache ပြဿနာက တစ်ဖန်ပေါ်လာပြန်သည်။ ဥပမာအားဖြင့်၊ ဘရောက်ဆာသည် ရုပ်ပုံများကို cache လုပ်သည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် ဖိုင်အမည်ကို မပြောင်းလဲဘဲ ရုပ်ပုံတစ်ခုကို ပြုပြင်မွမ်းမံလျှင်၊ ဝဘ်ဆိုဒ်၏ အသုံးပြုသူများသည် ရုပ်ပုံအား ယခင်အတိုင်းမြင်ရမည်ဖြစ်ပြီး ၎င်းတို့၏စက်တွင် cache လုပ်ထားသောကြောင့် ဖြစ်သည်။

ဤပြဿနာအတွက် အဖြေမှာ၊ သင်သိပြီးဖြစ်သည့်အတိုင်း၊ ဖိုင်အမည်တွင် hash ထည့်သွင်းခြင်းဖြစ်သည်။ Webpack သည် အရင်းအမြစ်ဖိုင်များကို ထုတ်လုပ်သည့်ဖိုလ်ဒါထဲသို့ ကူးယူရန် ခွင့်ပြုပေးပြီး၊ အဆိုပါဖိုင်များတွင် hash များထည့်သွင်းကာ၊ အရေးအကြီးဆုံးမှာ၊ ဖိုင်အားလုံးအတွင်းရှိ ဤအရင်းအမြစ်များသို့ လမ်းကြောင်းများကို အသစ်များအဖြစ် ပြောင်းလဲပေးသည်။

Webpack တွင် အဆင်များနှင့် အလုပ်လုပ်ခြင်းကို အထူး assets modules များဖြင့် ဆောင်ရွက်သည်။ ၎င်းတို့တွင် အမျိုးအစားလေးမျိုးရှိသည်: asset/resource, asset/inline, asset/source, asset.

asset/resource module သည် ဖိုင်များကို ပရောဂျက်ဖိုလ်ဒါမှ ထုတ်လုပ်သည့်ဖိုလ်ဒါသို့ ကူးယူပြီး ၎င်းတို့သို့ လမ်းကြောင်းများကို အသစ်များဖြင့် အစားထိုးသည်။ asset/inline module သည် ဖိုင်များကို ပရောဂျက်ဖိုလ်ဒါမှ ယူပြီး ထုတ်လုပ်ထားသောကုဒ်အတွင်း ဖိုင်များသို့ လမ်းကြောင်းများကို base64 အဖြစ် အစားထိုးသည်။ asset/source module သည် ဖိုင်များကို ပရောဂျက်ဖိုလ်ဒါမှ ယူပြီး ၎င်းတို့ကို စာသားစာကြောင်းအဖြစ် ပြန်ပေးသည်။ asset module သည် ဖိုင်ကို ထုတ်လုပ်သည့်ဖိုလ်ဒါထဲသို့ ကူးယူမည် သို့မဟုတ် base64 အဖြစ် ပြောင်းလဲမည်ကို အလိုအလျောက် ရွေးချယ်သည်။ ရွေးချယ်မှုကို ဖိုင်အရွယ်အစားပေါ် မူတည်၍ ဆောင်ရွက်သည်။ စံထားရှိသည်မှာ 8kb ထက်ပိုသောဖိုင်များကို ဖိုင်များအဖြစ် ထုတ်လုပ်သည်။

ဤ modules များကို အသုံးပြုသည့် ယေဘုယျ ပုံစံမှာ အောက်ပါအတိုင်းဖြစ်သည်:

module: {
	rules: [
		{
			test: /\.png$/,        // ဖိုင်များ
			type: 'asset/resource' // module အမျိုးအစား
		}
	]
},

အဆင် (assets) ဆိုသည်မှာ အဘယ်ကို ဆိုလိုသည်ကို ရှင်းပြပါ။

base64 ဆိုသည်မှာ အဘယ်နည်း၊ ၎င်းကို CSS တွင် မည်သို့အသုံးပြုသည်ကို ရှာဖွေဖတ်ရှုပါ။

�ဆင်များအတွက် module အမျိုးအစား 4 မျိုးကို ဖော်ပြပါ။

�ဆင်များအတွက် module အမျိုးအစား 4 မျိုးစလုံး၏ ရည်ရွယ်ချက်ကို ရှင်းပြပါ။