ওয়েবপ্যাকে হ্যাশ সহ স্ক্রিপ্ট বান্ডল লেআউটে

সাধারণত প্রজেক্ট বিল্ড করার সময় আমরা চাই যে বান্ডলগুলির নামে হ্যাশ থাকুক। ব্রাউজার দ্বারা ফাইল ক্যাশিং সমস্যা সমাধানের জন্যই আমাদের এটি প্রয়োজন।

সুতরাং, এটি সুবিধাজনক যে ওয়েবপ্যাক স্বয়ংক্রিয়ভাবে হ্যাশ-সহ নামযুক্ত বান্ডলগুলি সংযুক্ত করবে। আসুন পরীক্ষা করে দেখি। ধরুন আমাদের নিম্নলিখিত সেটিংস আছে:

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>

এবং প্রজেক্টের ফাইল পরিবর্তন করলে এবং পুনরায় বিল্ড করলে ওয়েবপ্যাক স্বয়ংক্রিয়ভাবে হ্যাশ পরিবর্তন করবে এবং লেআউট ফাইলে পরিবর্তনগুলি সন্নিবেশ করবে। তবে যদি প্রজেক্টের ফাইলগুলি পরিবর্তন না হয়, তাহলে হ্যাশও পরিবর্তন হবে না।

তিনটি এন্ট্রি পয়েন্ট তৈরি করুন। নিশ্চিত করুন যে তারা আলাদা আলাদা বান্ডলে বিল্ড হয় হ্যাশ-সহ নাম নিয়ে।

প্রকল্পটি বিল্ড করুন। নিশ্চিত হন যে লেআউট ফাইলে সমস্ত বান্ডল সংযুক্ত আছে।

এন্ট্রি পয়েন্টগুলির একটি সোর্স ফাইলের টেক্সট পরিবর্তন করুন। বিল্ড করুন। নিশ্চিত হন যে সেই এন্ট্রির বান্ডলের হ্যাশ পরিবর্তন হয়েছে, কিন্তু অন্য বান্ডলগুলির - পরিবর্তন হয়নি।