Plusieurs bundles de styles dans un layout Webpack

Supposons maintenant que nous ayons plusieurs points d'entrée, qui sont compilés dans leurs propres bundles. Supposons que pour chaque point d'entrée, ses propres fichiers CSS soient connectés. Comme vous le savez déjà, dans ce cas, il y aura un bundle CSS propre à chaque point d'entrée. Webpack connectera automatiquement chacun de ces bundles.

Vérifions cela en pratique. Connectons les styles au premier point d'entrée :

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

Connectons les styles au deuxième point d'entrée :

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

Effectuons la configuration :

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

En conséquence, le fichier de layout aura l'aspect suivant :

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

Créez trois points d'entrée. À chaque point, connectez trois fichiers CSS. Effectuez la compilation. Assurez-vous que tous les bundles sont automatiquement connectés.