Fail Layout Sendiri dalam Webpack

Dalam amalan biasanya kita sudah mempunyai HTML layout tapak web sendiri. Dalam kes ini kita perlukan Webpack mengambil layout kami, dan bukan menjana layoutnya sendiri. Mari lihat bagaimana ia dilakukan.

Katakan kita mempunyai layout berikut:

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

Mari arahkan Webpack mengambil layout kami. Untuk ini, tentukannya dalam tetapan berikut:

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

Hasilnya, selepas pembinaan dalam folder dist akan terdapat layout kami dan di dalamnya secara automatik akan disambungkan semua bundle:

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

Buat layout anda sendiri. Tetapkan Webpack supaya ia mengambil layout anda.