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 चालू करके बिल्ड करें। जांचें कि क्या आपके पास लेआउट फ़ाइल बनती है। इसके सोर्स कोड का अध्ययन करें। फ़ाइल को ब्राउज़र में खोलें।