Múltiples bundles de estilos en el diseño en Webpack

Supongamos ahora que tenemos múltiples puntos de entrada, que se compilan en sus propios bundles. Supongamos que a cada punto de entrada se le conectan sus propios archivos CSS. Como ya sabes, en este caso, para cada punto de entrada habrá su propio bundle CSS. Webpack conectará automáticamente cada uno de estos bundles.

Comprobémoslo en la práctica. Conectemos los estilos al primer punto de entrada:

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

Conectemos los estilos al segundo punto de entrada:

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

Realicemos la configuración:

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

Como resultado, el archivo de diseño tendrá la siguiente forma:

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

Crea tres puntos de entrada. A cada punto, conéctale tres archivos CSS. Realiza la compilación. Asegúrate de que todos los bundles se conecten automáticamente.