Multiple style bundles in a layout in Webpack

Now let's say we have several entry points that are collected into their own bundles. Let each entry point have its own CSS files. As you already know, in this case, each entry point will have its own CSS bundle. Webpack will automatically include each of these bundles.

Let's check it out in practice. Let's connect styles to the first entry point:

import './styles1-1.css';
import './styles1-2.css';

Let's connect the styles to the second entry point:

import './styles2-1.css';
import './styles2-2.css';

Let's do the setup:

export default {
	context: path.resolve( 'src'),
	entry: {
		test1: './test1.js',
		test2: './test2.js'
	},
	output: {
		filename: '[name].[contenthash].js',
		path: path.resolve('dist'),
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].[contenthash].css'
		}),
		new HtmlWebpackPlugin(),
	],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

As a result, the layout file will look like this:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<script defer src="test1.18e856b0da2f7862ab19.js"></script>
		<script defer src="test2.d12ade182c2989b4efa8.js"></script>
		<link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet">
		<link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet">
	</head>
	<body>
		
	</body>
</html>

Make three entry points. Connect three CSS files to each point. Build. Make sure all bundles are automatically connected.