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

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

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

export 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 များ ချိတ်ဆက်သွားမည်ဖြစ်သည်။

<!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 လည်း မပြောင်းလဲပါ။

ဝင်ပေါက်အမှတ်သုံးခုပြုလုပ်ပါ။ ၎င်းတို့ကို Hash များပါသောအမည်များဖြင့် သီးခြား Bundle များအဖြစ် တည်ဆောက်နိုင်အောင်ပြုလုပ်ပါ။

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

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