Script Bundles with Hash in Layout in Webpack

Typically, when building a project, we want bundle names to contain hashes. We need this to solve the problem with browser file caching.

So it's convenient that Webpack will automatically include bundles with names containing hashes. Let's check. Let's say we have the following settings:

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

After assembly, our bundles with hashes will be connected to the layout file:

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

In this case, when changing project files and rebuilding, Webpack will automatically change the hashes and make changes to the layout file. If the project files have not changed, then the hash will not change.

Make three entry points. Make them go into separate bundles with names containing hashes.

Build the project. Make sure all bundles are included in the layout file.

Change the text in the source file of one of the entry points. Build. Check that the hash of the bundle of this point changes, but not of the other bundles.