Skriptų bundlai su maišos kodu makete su Webpack

Paprastai projektu surinkimo metu mes norime, kad bundlų pavadinimuose būtų maišos kodai. Mums to reikia tam, kad išspręstume failų talpinimo naršyklėje problemą.

Todėl patogu, kad Webpack automatiškai prijungs bundlus su pavadinimais, kuriuose yra maišos kodai. Patikrinkime. Tarkime, mes turime šiuos nustatymus:

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

Po surinkimo prie maketo failo bus prijungti mūsų bundlai su maišos kodais:

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

Be to, pakeitus projekto failus ir perkompiliavus, Webpack automatiškai pakeis maišos kodus ir atnaujins maketo failą. Jei projekto failai nebuvo pakeisti, tai maišos kodas nepasikeis.

Sukurkite tris įėjimo taškus. Padarykite taip, kad jie būtų surinkti į atskirus bundlus su pavadinimais, kuriuose yra maišos kodai.

Atlikite projekto surinkimą. Įsitikinkite, kad maketo faile yra prijungti visi bundlai.

Pakeiskite tekstą vieno iš įėjimo taškų šaltinio faile. Atlikite surinkimą. Patikrinkite, ar to įėjimo taško bundlo maišos kodas pasikeitė, o kitų bundlų - ne.