Generarea layout-ului HTML în Webpack
În lecția precedentă am instalat și am conectat HtmlWebpackPlugin. Acum, la build, un fișier de layout HTML va fi generat automat și în acest layout vor fi conectate automat scripturile și stilurile.
Să încercăm cel mai simplu caz. Să presupunem că avem un singur punct de intrare:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Ca rezultat, după build, JavaScript-ul nostru
va fi colectat într-un bundle cu numele main.js
și acest bundle va fi conectat la layout-ul site-ului
creat automat:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Efectuați build-ul cu HtmlWebpackPlugin activat. Verificați dacă fișierul layout-ului apare. Studiați codul său sursă. Deschideți fișierul în browser.
