Gjenerimi i Layout-it HTML në Webpack
Në mësimin e mëparshëm ne instalojmë dhe konfiguruam HtmlWebpackPlugin. Tani, gjatë ndërtimit, një skedar layouti HTML do të gjenerohet automatikisht dhe në këtë layout skedarët JavaScript dhe CSS do të lidhen automatikisht.
Le të provojmë rastin më të thjeshtë. Le të themi se kemi vetëm një pikë hyrëse:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Si rezultat, pas ndërtimit, JavaScript-i ynë
do të kombinohet në një bundle me emrin main.js
dhe ky bundle do të lidhet në layout-in e krijuar automatikisht
të faqes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Kryeni ndërtimin me HtmlWebpackPlugin të aktivizuar. Kontrolloni nëse skedari i layout-it shfaqet. Studioni kodin e tij burimor. Hapni skedarin në shfletues.
