Bundel Skrip dengan Hash dalam Layout di Webpack

Biasanya saat membangun proyek, kita menginginkan nama bundel mengandung hash. Kita membutuhkan ini untuk mengatasi masalah caching file oleh browser.

Oleh karena itu, sangat memudahkan bahwa Webpack secara otomatis akan menghubungkan bundel dengan nama yang mengandung hash. Mari kita buktikan. Misalkan kita memiliki pengaturan berikut:

export default {
	context: path.resolve( 'src'),
	entry: {
		test1: './test1.js',
		test2: './test2.js'
	},
	output: {
		filename: '[name].[contenthash].js',
		path: path.resolve('dist'),
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Setelah build, file layout akan terhubung ke bundel kita dengan hash:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<script defer src="test1.4173b379c6d6ff439604.js"></script>
		<script defer src="test2.72be8754d7c4cb0ece00.js"></script>
	</head>
	<body>
		
	</body>
</html>

Selain itu, ketika file proyek diubah dan build ulang dilakukan, Webpack secara otomatis akan mengubah hash dan memasukkan perubahan ke dalam file layout. Jika file proyek tidak berubah, maka hash juga tidak akan berubah.

Buatlah tiga titik entri. Atur agar mereka dibangun menjadi bundel terpisah dengan nama yang mengandung hash.

Lakukan build proyek. Pastikan bahwa semua bundel terhubung dalam file layout.

Ubah teks dalam file sumber salah satu titik entri. Lakukan build. Periksa bahwa hash bundel dari titik entri tersebut akan berubah, sedangkan bundel lainnya - tidak.