Webpack skriptu bundle ar hešu izkārtojumā

Parasti, veicot projekta buildošanu, mēs vēlamies, lai bundle nosaukumi satur hešus. Mums tas ir vajadzīgs, lai atrisinātu problēmu ar pārlūkprogrammas kešatmiņu failu glabāšanā.

Tāpēc ir ērti, ka Webpack automātiski pievienos bundle ar nosaukumiem, kas satur hešus. Pārbaudīsim. Pieņemsim, ka mums ir šādi iestatījumi:

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(),
	],
};

Pēc buildošanas faila izkārtojumam tiks pievienoti mūsu bundle ar hešiem:

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

Šajā gadījumā, mainot projekta failus un pārbūvējot, Webpack automātiski mainīs hešus un veiks izmaiņas izkārtojuma failā. Ja projekta faili netika mainīti, tad hešs arī nemainīsies.

Izveidojiet trīs ievades punktus. Iestatiet tā, lai tie tiktu apkopoti atsevišķos bundle ar nosaukumiem, kas satur hešus.

Veiciet projekta buildošanu. Pārliecinieties, ka izkārtojuma failā ir pievienoti visi bundle.

Mainiet tekstu vienā no ievades punktu avota failiem. Veiciet buildošanu. Pārbaudiet, vai šī punkta bundle hešs tiks mainīts, bet pārējo bundle - nē.