Tạo bố cục HTML trong Webpack

Trong bài học trước, chúng ta đã cài đặt và kết nối HtmlWebpackPlugin. Bây giờ khi build, chúng ta sẽ tự động có một tệp bố cục HTML được tạo ra và trong bố cục này các script và style sẽ được kết nối tự động.

Hãy thử trường hợp đơn giản nhất. Giả sử chúng ta có một điểm vào:

export default {
	entry: './src/index.js',
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Kết quả là sau khi build, JavaScript của chúng ta sẽ được đóng gói thành một bundle với tên main.js và bundle này sẽ được kết nối vào bố cục trang web được tạo tự động:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

Hãy thực hiện build với HtmlWebpackPlugin được bật. Kiểm tra xem bạn có xuất hiện tệp bố cục không. Nghiên cứu mã nguồn của nó. Mở tệp trong trình duyệt.