Multipli bundle di stili nel layout in Webpack

Supponiamo ora di avere diversi punti di ingresso, che vengono compilati nei rispettivi bundle. Supponiamo che a ciascun punto di ingresso siano collegati i propri file CSS. Come già sapete, in questo caso, per ogni punto di ingresso ci sarà un proprio bundle CSS. Webpack collegherà automaticamente ciascuno di questi bundle.

Verifichiamolo nella pratica. Colleghiamo gli stili al primo punto di ingresso:

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

Colleghiamo gli stili al secondo punto di ingresso:

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

Configuriamo:

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

Di conseguenza, il file di layout avrà il seguente aspetto:

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

Create tre punti di ingresso. Collegate a ciascun punto tre file CSS. Eseguite la build. Assicuratevi che tutti i bundle vengano collegati automaticamente.