Webpack အတွက် ကိုယ်ပိုင် လေးအုတ်ဖို ဖိုင်ရယူခြင်း

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

အောက်ပါလေးအုတ်ဖို့ ကျွန်ုပ်တို့တွင် ရှိသည်ဟု ယူဆပါစို့။

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</title>
  </head>
  <body>
    
  </body>
</html>

Webpack အား ကျွန်ုပ်တို့၏ လေးအုတ်ဖို့ကို ယူဆောင်စေရန် အောက်ပါ ပြင်ဆင်ချက်တွင် သတ်မှတ်ပေးရပါမည်။

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

ရလဒ်အနေဖြင့် တည်ဆောက်ပြီးနောက် dist ဖိုလ်ဒါအတွင်း ကျွန်ုပ်တို့၏ လေးအုတ်ဖို့ ရှိနေမည်ဖြစ်ပြီး ၎င်းအတွင်း ဘန်ဒဲအားလုံးသည် အလိုအလျောက် ချိတ်ဆက်သွားမည်ဖြစ်သည်။

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>