Webpack-এ আপনার নিজের লেআউট ফাইল

অনুশীলনে, সাধারণত আমাদের ইতিমধ্যেই সাইটের নিজস্ব HTML লেআউট থাকে। এই ক্ষেত্রে, আমাদের প্রয়োজন যে Webpack আমাদের লেআউটটি নিক, নিজেরটি জেনারেট না করে। আসুন দেখি এটি কিভাবে করা হয়।

ধরুন আমাদের নিম্নলিখিত লেআউট আছে:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My layout</title>
	</head>
	<body>
		
	</body>
</html>

Webpack কে আমাদের লেআউট নিতে বাধ্য করি। এটি করার জন্য, নিম্নলিখিত সেটিংসে এটি লিখুন:

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

ফলস্বরূপ, বিল্ড করার পর ফোল্ডারে dist আমাদের লেআউট থাকবে এবং এতে স্বয়ংক্রিয়ভাবে সমস্ত বান্ডল সংযুক্ত করা হবে:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My layout</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

আপনার নিজের লেআউট তৈরি করুন। Webpack কে সেট আপ করুন যাতে এটি আপনার লেআউট নেয়।