Generering af HTML-layout i Webpack
I den forrige lektion installerede og tilsluttede vi HtmlWebpackPlugin. Nu vil der ved build automatisk blive genereret en fil HTML-layout, og i denne layout vil scripts og stile automatisk blive tilsluttet.
Lad os prøve den mest simple sag. Lad os sige, at vi har et enkelt entry point:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Som et resultat vil vores JavaScript efter build
blive samlet i en bundle med navnet main.js
og denne bundle vil blive tilsluttet den automatisk
oprettede site-layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Udfør build med HtmlWebpackPlugin aktiveret. Kontroller, at layout-filen vises. Studer dens kildekode. Åbn filen i en browser.