Webpack-da o'zingizning layout faylingiz

Amalda odatda bizda allaqachon o'zimizning HTML sayt layout'imiz bo'ladi. Bunday holda, Webpack-ning o'z layoutini yaratish o'rniga, bizning layoutimizdan foydalanishini ta'minlashimiz kerak. Keling, buni qanday qilishni ko'rib chiqaylik.

Bizda quyidagi layout mavjud deb faraz qilaylik:

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

Keling, Webpack-ni bizning layoutimizdan foydalanishiga majbur qilaylik. Buning uchun uni quyidagi sozlamada ko'rsatamiz:

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

Natijada, build qilingandan keyin dist papkasida bizning layoutimiz bo'ladi va unga barcha bundle'lar avtomatik ulangan bo'ladi:

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

O'zingizning layoutingizni yarating. Webpack-ni sozlang, shunda u sizning layoutingizdan foydalansin.