HTML-lay-out genereren in Webpack
In de vorige les hebben we HtmlWebpackPlugin geïnstalleerd en aangesloten. Nu wordt er bij het bouwen automatisch een HTML-lay-outbestand gegenereerd en in deze lay-out worden automatisch scripts en stijlen ingesloten.
Laten we het eenvoudigste geval proberen. Stel dat we één ingangspunt hebben:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Als resultaat wordt onze JavaScript
na de build gebundeld in een bundel met de naam main.js
en deze bundel wordt aangesloten op de automatisch
gemaakte sitelay-out:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Voer de build uit met ingeschakelde HtmlWebpackPlugin. Controleer of het lay-outbestand bij je verschijnt. Bestudeer de broncode. Open het bestand in de browser.
