JavaScript တွင် Webpack စုစည်းရေးကိရိယာ၏ အလုပ်လုပ်ပုံ

သာမန်အားဖြင့်၊ ဆော့ဖ်ဝဲဖွံ့ဖြိုးတည်ဆောက်ရာတွင် ကျွန်ုပ်တို့တွင် ကုဒ်အပိုင်းအစများပါရှိသည့် JavaScript ဖိုင်များစွာ ရရှိတတ်ပါသည်။ ၎င်းတို့သည် ကျွန်ုပ်တို့၏ကိုယ်ပိုင်ကုဒ်အပိုင်းအစများ သို့မဟုတ် တတိယပါတီ လိုက်ဘရရီများ ဖြစ်နိုင်ပါသည်။ ရလဒ်အနေနှင့် ထိုဖိုင်တစ်ခုချင်းစီကို HTML ဖိုင်ထဲသို့ script tag မှတစ်ဆင့် ချိတ်ဆက်ပေးရန် လိုအပ်ပါသည်။

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

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

သီးခြားဖိုင်များသည် ES modules များ ဖြစ်ကြသည်။ ဤမော်ဂျူးများကို အခြားဖိုင်များသို့ import command မှတစ်ဆင့် ချိတ်ဆက်ပါသည်။

သာမန်အားဖြင့် အခြားဖိုင်အားလုံး ချိတ်ဆက်ရန် ပင်မ ဖိုင်တစ်ခုကို ဖန်တီးကြပါသည်။ ဤဖိုင်ကို entry point ဟု ခေါ်ပါသည်။

စုစည်းရေးကိရိယာသည် entry point ထဲသို့ဝင်ပြီး ၎င်းထဲသို့ မည်သည့်မော်ဂျူးများ ချိတ်ဆက်ထားသည်ကို ကြည့်ရှုပါသည်။ ထိုမော်ဂျူးများထဲသို့လည်း အခြားမော်ဂျူးများ ချိတ်ဆက်ထားနိုင်ပါသည်။ စုစည်းရေးကိရိယာသည် ချိတ်ဆက်မှုအားလုံးကို လိုက်ပါသွားကာ ကုဒ်အားလုံးကို ဖိုင်တစ်ဖိုင်ထဲတွင် စုစည်းပါသည်။ ဤဖိုင်ကို bundle ဟု ခေါ်ပါသည်။

သာမန်အားဖြင့်၊ ပရိုဂရမ်မာမှရေးသားသည့် ကုဒ်ကို src ဖိုလ်ဒါအတွင်းတွင် ထားရှိပြီး စုစည်းပြီး ကုဒ်ကို dist ဖိုလ်ဒါအတွင်းသို့ ထည့်သွင်းပါသည်။

စုစည်းရေးကိရိယာသည် စုစည်းခြင်း mode ကိုလည်း ထိန်းညှိခွင့်ပေးပါသည်။ 'development' mode သည် ဖွံ့ဖြိုးတည်ဆောက်မှုလုပ်ငန်းစဉ်အတွက် ရည်ရွယ်ပါသည်။ ၎င်းသည် ဖွံ့ဖြိုးရေးအတွက် အဆင်ပြေစေရန် ကုဒ်ကို စုစည်းပေးပါသည်။ 'production' mode သည် အလုပ်ထဲတွင် တင်မည့် နောက်ဆုံးကုဒ်အတွက် ရည်ရွယ်ပါသည်။ ဤ mode တွင် ကုဒ်၏အရွယ်အစားလျှော့ချရန်နှင့် ဆွဲယူတင်ခြင်းအရှိန်မြှင့်တင်ရန် ကုဒ်ကို minify လုပ်ပါမည်။