Generasi Layout HTML di Webpack
Dalam pelajaran sebelumnya, kita telah menginstal dan menghubungkan HtmlWebpackPlugin. Sekarang saat build, file layout HTML akan dihasilkan secara otomatis untuk kita dan dalam layout ini, skrip dan gaya akan terhubung secara otomatis.
Mari kita coba kasus yang paling sederhana. Misalkan kita memiliki satu titik masuk:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Hasilnya setelah build, JavaScript kita
akan dikumpulkan menjadi bundle dengan nama main.js
dan bundle ini akan dihubungkan ke layout situs yang
dibuat secara otomatis:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Lakukan build dengan HtmlWebpackPlugin diaktifkan. Periksa apakah file layout muncul pada Anda. Pelajari kode sumbernya. Buka file di browser.
