Webpack တွင် Hash ပါသော Script Bundles များကို Layout ထဲသို့ထည့်သွင်းခြင်း

ယေဘူယျအားဖြင့် ပရောဂျက်တစ်ခုကို တည်ဆောက်သည့်အခါ Bundle များ၏အမည်များတွင် Hash များ ပါဝင်စေလိုပါသည်။ ၎င်းကို ဘရောင်ဇာမှ ဖိုင်များကို Cache လုပ်ခြင်းပြဿနာကို ဖြေရှင်းရန် လိုအပ်ပါသည်။

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

webpack.config.jsexport default {
  context: path.resolve( 'src'),
  entry: {
    test1: './test1.js',
    test2: './test2.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve('dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

တည်ဆောက်ပြီးနောက် ဖိုင်လမ်းကြောင်း လမ်းညွှန်ချက်ထဲသို့ ကျွန်ုပ်တို့၏ Hash ပါသော Bundle များ ချိတ်ဆက်သွားမည်ဖြစ်သည်။

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="test1.4173b379c6d6ff439604.js"></script>
    <script defer src="test2.72be8754d7c4cb0ece00.js"></script>
  </head>
  <body>
    
  </body>
</html>

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