ဖြေရှင်းထားသည်- html-webpack-plug

html-webpack-plugin အကြောင်း အလွန်ရှည်လျားသော ဆောင်းပါးကို ရေးသားရာတွင် နည်းပညာဆိုင်ရာ အချက်အလက် အနည်းငယ် ပါဝင်သော်လည်း အဆင့်ဆင့် ခွဲခြမ်းစိတ်ဖြာနိုင်ရန် အကောင်းဆုံး လုပ်ဆောင်ပါမည်။

HTML webpack plugin သည် သင်၏ webpack အစုအဝေးများကို ဝန်ဆောင်မှုပေးရန်အတွက် HTML ဖိုင်များဖန်တီးခြင်းကို ရိုးရှင်းစေသည်။ ၎င်းသည် စုစည်းမှုတိုင်းကို ပြောင်းလဲပေးသည့် ဖိုင်အမည်တွင် hash ပါ၀င်သည့် webpack အစုအဝေးများအတွက် အထူးသဖြင့် အသုံးဝင်သည်။ ပလပ်အင်သည် သင့်အတွက် HTML ဖိုင်တစ်ခု ဖန်တီးနိုင်စေကာ၊ သင့်အတွက် ဟက်ခ်များကို ပေါင်းစပ်ပေးပြီး အမြတ်အစွန်းကို ပေးနိုင်သည်။

အခု HTML webpack plugin ကိုအသုံးပြုတဲ့အခါ သင်ကြုံတွေ့ရတတ်တဲ့ ပြဿနာတစ်ခုရဲ့ အဖြေကို ကြည့်ရအောင်။

ဘုံပြProbleနာ

HTML ၏ကိုယ်ထည် သို့မဟုတ် ခေါင်းထဲသို့ Script များကို ထည့်သွင်းလိုသည်ဆိုပါစို့။ ၎င်းတွင် ပုံသေအားဖြင့် အပိုင်းအားလုံးပါဝင်သည် - ကျွန်ုပ်တို့လိုချင်သည့်အရာမဟုတ်ပါ။

ပြဿနာဖြေရှင်းချက်

ဤသည်မှာ ဆေးထိုးရန်အတွက် ဦးခေါင်းနှင့် ခန္ဓာကိုယ်တဂ်များကိုသာ အသုံးပြုနိုင်သည့် အခြေခံလွဲမှားမှုတစ်ခုဖြစ်သည်။ HTML webpack plugin configuration တွင် inject option ကို သတ်မှတ်ခြင်းဖြင့် ကျွန်ုပ်တို့တွင် ရွေးချယ်စရာများ ပိုမိုရရှိနိုင်ပါသည်။

ယခု ပိုမိုလက်တွေ့ကျသောပုံစံဖြင့် ၎င်းကိုသရုပ်ဖော်ရန်အတွက် JavaScript ကုဒ်အချို့ကို စူးစမ်းလေ့လာကြည့်ကြပါစို့။

new HtmlWebpackPlugin({
  inject: 'body',
  
  // Other configurations...
})

ဒါက လုပ်နည်းတစ်ခုပါ။ ဇာတ်ညွှန်းကို ခေါင်းထဲသို့ သွင်းနိုင်သည်။

new HtmlWebpackPlugin({
  inject: 'head',
  
  // Other configurations...
})

Code ၏ အဆင့်ဆင့် ရှင်းလင်းချက်

1. 'ထိုးသွင်း: ခန္ဓာကိုယ်' ဤကိစ္စတွင် ကျွန်ုပ်တို့သည် ၎င်းတို့ကို စတင်အသုံးပြုလိုသောအခါတွင် ဖိုင်အားလုံးကို တင်ထားကြောင်း သေချာစေရန်အတွက် ထုတ်လုပ်ထားသော js ဖိုင်များကို body tag ၏အောက်ခြေတွင် ထည့်သွင်းပါသည်။
2. 'ခေါင်းထိုး' ဆိုလိုသည်မှာ script ကို HTML ၏ ခေါင်းတွင် ထားရှိမည်ဖြစ်သည်။

အခြားကိစ္စများတွင်၊ ဤရွေးချယ်မှုများသည် မလုံလောက်နိုင်ပါ။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် ဝင်ခွင့်အမှတ်များစွာရှိပြီး မတူညီသောနေရာများတွင် မတူညီသော script များကို နေရာချလိုပါက၊

စာကြည့်တိုက်များ သို့မဟုတ် လုပ်ငန်းဆောင်တာများ ပါဝင်ပါသည်။

Webpack သည် ခေတ်မီ JavaScript အပလီကေးရှင်းများအတွက် static module bundle တစ်ခုဖြစ်သည်။ Webpack သည် မှီခိုမှုနှင့်အတူ မော်ဂျူးများကို ယူဆောင်ကာ ထို module များကို ကိုယ်စားပြုသည့် တည်ငြိမ်သော ပိုင်ဆိုင်မှုများကို ထုတ်ပေးသည်။

HtmlWebpackPlugin သည် သင်၏ webpack အစုအဝေးများကို ဝန်ဆောင်မှုပေးရန်အတွက် HTML ဖိုင်များ ဖန်တီးခြင်းကို ရိုးရှင်းစေသည်။ HtmlWebpack Plugin သည် HTML ဖိုင်တစ်ခုကို ဦးစွာဖန်တီးပြီးနောက် ဖန်တီးထားသော HTML ဖိုင်ထဲသို့ ဝဘ်ပက်ခ်မှ ဖန်တီးထားသော Script များကို ထည့်သွင်းခြင်းဖြင့် အလုပ်လုပ်ပါသည်။

  • webpack
  • HtmlWebpackPlugin

သင်တွေ့မြင်ရသည့်အတိုင်း၊ html-webpack-plugin မှတစ်ဆင့် ဤခရီးတွင် ကျွန်ုပ်တို့သည် ၎င်း၏အခြေခံလုပ်ဆောင်နိုင်စွမ်းကို နားလည်သဘောပေါက်ခြင်းမှသည် ဘုံပြဿနာများကိုဖြေရှင်းခြင်း၊ ကုဒ်၏ရှုပ်ထွေးနက်နဲသည့်အရာများထဲသို့ တိုးဝင်ကာ သက်ဆိုင်ရာစာကြည့်တိုက်များနှင့် လုပ်ဆောင်ချက်များကို မီးမောင်းထိုးပြခြင်းအထိ ရှုထောင့်အမျိုးမျိုးကို ထိတွေ့ခဲ့ကြပါသည်။

Related ရေးသားချက်များ:

a Comment ချန်ထား