Plusieurs bundles CSS dans Webpack

Si plusieurs points d'entrée sont fusionnés dans un seul fichier, alors le fichier de bundle CSS sera unique pour eux. Si nous regroupons le JavaScript en plusieurs bundles, alors chacun d'eux aura son propre fichier CSS assemblé.

Regardons un exemple. Supposons que nous ayons un point d'entrée et que certains fichiers de styles y sont importés :

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

Supposons que vers le second point d'entrée des styles soient également importés :

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

Écrivons les configurations :

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'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

Le résultat de ces configurations sera deux bundles CSS : test1.398db7afe3b52e94bb25.css et test2.1d12c304c284a752cb9a.css.

Créez trois points d'entrée. Connectez à chacun ses propres fichiers CSS. Effectuez la construction et vérifiez le résultat obtenu.