Webpack ထဲတွင် HTML မာတိကာ ထုတ်လုပ်ခြင်း

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

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

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

ရလဒ်အနေဖြင့် စုစည်းတည်ဆောက်ပြီးနောက် ကျွန်ုပ်တို့၏ JavaScript သည် main.js ဟူသော ဘန်ဒယ်အမည်ဖြင့် စုစည်းမိမည်ဖြစ်ပြီး ထိုဘန်ဒယ်ကို အလိုအလျောက် ဖန်တီးထားသော ဝဘ်ဆိုက်မာတိကာသို့ ချိတ်ဆက်ပေးမည်။

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>