HTML maket generálása Webpackben
Az előző leckében telepítettük és beállítottuk a HtmlWebpackPlugin-t. Most minden buildeléskor automatikusan generálódni fog egy HTML maket fájl, és ebbe a maketbe automatikusan be lesznek kötve a szkriptek és a stílusok.
Próbáljuk ki a legegyszerűbb esetet. Tegyük fel, hogy van egy belépési pontunk:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Ennek eredményeképpen a buildelés után a JavaScriptünk
egy main.js nevű bundlegyűjtőbe kerül,
és ez a bundlegyűjtő be lesz kötve az automatikusan
létrehozott weboldal maketbe:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Hajts végre buildelést a HtmlWebpackPlugin bekapcsolásával. Ellenőrizd, hogy megjelenik-e a maket fájl. Tanulmányozd a forráskódját. Nyisd meg a fájlt a böngészőben.
