Génération de maquette HTML dans Webpack
Dans la leçon précédente, nous avons installé et connecté HtmlWebpackPlugin. Maintenant, lors de la construction, un fichier de maquette HTML sera généré automatiquement pour nous et dans cette maquette, les scripts et les styles seront automatiquement connectés.
Essayons le cas le plus simple. Supposons que nous ayons un point d'entrée :
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
En conséquence, après la construction, notre JavaScript
sera compilé dans un bundle nommé main.js
et ce bundle sera connecté à la maquette de site
créée automatiquement :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Effectuez la construction avec HtmlWebpackPlugin activé. Vérifiez que le fichier de maquette apparaît chez vous. Étudiez son code source. Ouvrez le fichier dans le navigateur.
