Δημιουργία HTML Layout στο Webpack

Στο προηγούμενο μάθημα, εγκαταστήσαμε και συνδέσαμε το HtmlWebpackPlugin. Τώρα, κατά τη διάρκεια της δόμησης, ένα αρχείο HTML layout θα δημιουργείται αυτόματα και σε αυτό το layout θα συνδέονται αυτόματα τα scripts και τα styles.

Ας δοκιμάσουμε την πιο απλή περίπτωση. Ας υποθέσουμε ότι έχουμε ένα entry point:

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

Ως αποτέλεσμα, μετά τη δόμηση, το JavaScript μας θα συγκεντρωθεί σε ένα bundle με όνομα main.js και αυτό το bundle θα συνδεθεί στο αυτόματα δημιουργημένο layout του site:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

Εκτελέστε μια δόμηση με το HtmlWebpackPlugin ενεργοποιημένο. Ελέγξτε ότι εμφανίζεται το αρχείο layout. Μελετήστε τον πηγαίο του κώδικα. Ανοίξτε το αρχείο στον browser.