Το δικό σας αρχείο διάταξης στο 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 έτσι ώστε να παίρνει τη δική σας διάταξη.