Bundel Skrip dengan Hash dalam Layout Webpack

Biasanya apabila membina projek, kita mahu nama bundel mengandungi hash. Kami memerlukan ini untuk menyelesaikan masalah penyimpanan fail cache oleh pelayar.

Oleh itu, adalah mudah bahawa Webpack secara automatik akan menyambungkan bundel dengan nama yang mengandungi hash. Mari kita semak. Katakan kita mempunyai tetapan 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(),
	],
};

Selepas pembinaan, fail layout akan mempunyai bundel kami dengan hash disambungkan:

<!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>

Pada masa yang sama, apabila fail projek diubah dan dibina semula, Webpack secara automatik akan mengubah hash dan membuat perubahan pada fail layout. Jika fail projek tidak berubah, maka hash juga tidak akan berubah.

Buat tiga kemasukan. Pastikan mereka dibina ke dalam bundel berasingan dengan nama yang mengandungi hash.

Laksanakan pembinaan projek. Pastikan bahawa semua bundel disambungkan dalam fail layout.

Ubah teks dalam fail sumber salah satu kemasukan. Laksanakan pembinaan. Periksa bahawa hash bundel kemasukan itu akan berubah, tetapi hash bundel lain - tidak.