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 को इस तरह से कॉन्फ़िगर करें कि वह आपके लेआउट का उपयोग करे।