Webpack-এ HTML লেআউট জেনারেট করা

পূর্ববর্তী পাঠে, আমরা HtmlWebpackPlugin ইনস্টল এবং কনফিগার করেছি। এখন বিল্ড করার সময়, একটি HTML লেআউট ফাইল স্বয়ংক্রিয়ভাবে জেনারেট হবে এবং সেই লেআউটে স্ক্রিপ্ট এবং স্টাইলগুলি স্বয়ংক্রিয়ভাবে সংযুক্ত হবে।

আসুন সবচেয়ে সহজ ক্ষেত্রে চেষ্টা করি। ধরা যাক আমাদের একটি এন্ট্রি পয়েন্ট আছে:

export default {
	entry: './src/index.js',
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

ফলস্বরূপ, বিল্ড করার পর আমাদের JavaScript main.js নামের একটি বান্ডলে পরিণত হবে এবং এই বান্ডলটি স্বয়ংক্রিয়ভাবে তৈরি করা সাইট লেআউটে সংযুক্ত হবে:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

HtmlWebpackPlugin সক্রিয় করে বিল্ড করুন। নিশ্চিত করুন যে লেআউট ফাইলটি তৈরি হয়েছে। এর সোর্স কোড পরীক্ষা করুন। ব্রাউজারে ফাইলটি খুলুন।