Generazione del layout HTML in Webpack
Nella lezione precedente abbiamo installato e collegato HtmlWebpackPlugin. Ora durante la build avremo un file di layout HTML generato automaticamente e in questo layout verranno automaticamente collegati script e stili.
Proviamo il caso più semplice. Supponiamo di avere un solo punto di ingresso:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Di conseguenza, dopo la build, il nostro JavaScript
verrà compilato in un bundle con il nome main.js
e questo bundle verrà collegato al layout del sito
creato automaticamente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Esegui la build con HtmlWebpackPlugin abilitato. Verifica che venga generato il file di layout. Esamina il suo codice sorgente. Apri il file nel browser.
