Scriptbundler med hash i layouten i Webpack

Som regel når vi bygger et prosjekt ønsker vi at bundenavnene skal inneholde hash. Dette trenger vi for å løse problemet med caching av filer av nettleseren.

Derfor er det praktisk at Webpack automatisk vil koble til bundler med navn som inneholder hash. La oss sjekke. La oss si at vi har følgende innstillinger:

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

Etter bygging vil bundlene våre med hash bli koblet til layoutfilen:

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

Samtidig, når prosjektfiler endres og ombygges, vil Webpack automatisk endre hash-ene og gjøre endringer i layoutfilen. Hvis prosjektfilene derimot ikke ble endret, vil ikke hash-en endres.

Lag tre inngangspunkter. Gjør slik at de bygges til separate bundler med navn som inneholder hash.

Utfør prosjektbygget. Forsikre deg om at alle bundlene er tilkoblet i layoutfilen.

Endre teksten i kildefilen til ett av inngangspunktene. Utfør byggingen. Sjekk at hash-en til bundelen for dette inngangspunktet endres, mens de andre bundlene - ikke.