HTML դասավորության գեներացում Webpack-ում

Նախորդ դասում մենք տեղադրեցինք և միացրեցինք 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-ով: Ստուգեք, որ ձեզ մոտ հայտնվում է դասավորության ֆայլը: Ուսումնասիրեք դրա սկզբնական կոդը: Բացեք ֆայլը բրաուզերում: