Vários bundles de estilos em um layout no Webpack

Agora, vamos supor que temos vários pontos de entrada, que são compilados em seus próprios bundles. Vamos supor que para cada ponto de entrada estão conectados seus próprios arquivos CSS. Como você já sabe, neste caso, para cada ponto de entrada haverá seu próprio bundle CSS. O Webpack conectará automaticamente cada um desses bundles.

Vamos testar na prática. Vamos conectar os estilos ao primeiro ponto de entrada:

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

Vamos conectar os estilos ao segundo ponto de entrada:

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

Vamos fazer a configuração:

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, o arquivo de layout terá a seguinte aparência:

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

Crie três pontos de entrada. Conecte três arquivos CSS a cada ponto. Execute a build. Certifique-se de que todos os bundles são conectados automaticamente.