Πολλά bundles scripts στο layout στο Webpack

Αν ως αποτέλεσμα της build πάρουμε πολλά bundles, τότε το Webpack θα τα συνδέσει όλα. Ας το ελέγξουμε. Ας υποθέσουμε ότι έχουμε τις ακόλουθες ρυθμίσεις:

export default {
	context: path.resolve( 'src'),
	entry: {
		test1: './test1.js',
		test2: './test2.js'
	},
	output: {
		filename: '[name].build.js',
		path: path.resolve('dist'),
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Μετά την build, και τα δύο bundles μας θα συνδεθούν στο αρχείο layout:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="test1.build.js"></script>
		<script defer src="test2.build.js"></script>
	</head>
	<body>
		
	</body>
</html>

Δημιουργήστε τρία entry points. Εκτελέστε build. Μελετήστε το αρχείο layout και βεβαιωθείτε ότι όλα τα bundles σας είναι συνδεδεμένα εκεί.