Webpack-те өз құрылымдық файлыңыз

Практикада әдетте бізде қазірдің өзінде өз сайтымыздың HTML құрылымы бар болады. Бұл жағдайда бізге Webpack-тің өз құрылымын емес, біздің құрылымымызды алуы қажет. Келіңіздер, мұны қалай жасау керектігін көрейік.

Бізде келесі құрылым бар делік:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Менің құрылымым</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>Менің құрылымым</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

Өз құрылымыңызды жасаңыз. Webpack-ті өз құрылымыңызды алатындай етіп баптаңыз.