वेबपैक में हैश वाली स्क्रिप्ट बंडल लेआउट में

आम तौर पर प्रोजेक्ट के निर्माण के समय हम चाहते हैं कि बंडल के नाम में हैश शामिल हो। ब्राउज़र द्वारा फाइलों की कैशिंग की समस्या को हल करने के लिए हमें इसकी आवश्यकता होती है।

इसलिए यह सुविधाजनक है कि वेबपैक स्वचालित रूप से हैश युक्त नाम वाली बंडल को जोड़ देगा। आइए जांच करते हैं। मान लीजिए कि हमारे पास निम्नलिखित सेटिंग्स हैं:

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(),
	],
};

निर्माण के बाद लेआउट फाइल में हमारी हैश युक्त बंडल जुड़ जाएंगी:

<!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>

इसके अलावा, प्रोजेक्ट फाइलों में बदलाव करने और पुनः निर्माण करने पर वेबपैक स्वचालित रूप से हैश बदल देगा और लेआउट फाइल में परिवर्तन कर देगा। यदि प्रोजेक्ट फाइलों में कोई बदलाव नहीं हुआ है, तो हैश भी नहीं बदलेगा।

तीन एंट्री पॉइंट बनाएं। ऐसा करें कि वे अलग-अलग बंडल में बने हैश युक्त नामों के साथ।

प्रोजेक्ट का निर्माण करें। सुनिश्चित करें कि लेआउट फाइल में सभी बंडल जुड़े हुए हैं।

एक एंट्री पॉइंट की स्रोत फाइल में टेक्स्ट बदलें। निर्माण करें। जांचें कि उस एंट्री के बंडल का हैश बदल गया है, और बाकी बंडलों का - नहीं।