Generierung des HTML-Layouts in Webpack

In der vorherigen Lektion haben wir das HtmlWebpackPlugin installiert und eingerichtet. Jetzt wird bei jedem Build automatisch eine HTML-Layout-Datei generiert und in dieses Layout werden automatisch Skripte und Styles eingebunden.

Lassen Sie uns den einfachsten Fall ausprobieren. Nehmen wir an, wir haben einen einzelnen Einstiegspunkt:

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

Als Ergebnis wird unser JavaScript nach dem Build in ein Bundle mit dem Namen main.js gebündelt und dieses Bundle wird in das automatisch erstellte Seitenlayout eingebunden:

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

Führen Sie einen Build mit aktiviertem HtmlWebpackPlugin aus. Prüfen Sie, ob die Layout-Datei bei Ihnen erscheint. Studieren Sie ihren Quellcode. Öffnen Sie die Datei in einem Browser.