Mai multe bundle-uri de stiluri în layout în Webpack

Să presupunem că acum avem mai multe puncte de intrare, care sunt colectate în bundle-uri proprii. Să fie conectate la fiecare punct de intrare propriile fișiere CSS. După cum știți deja, în acest caz, pentru fiecare punct de intrare va exista propriul bundle CSS. Webpack va conecta automat fiecare dintre aceste bundle-uri.

Să verificăm în practică. Să conectăm stilurile la primul punct de intrare:

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

Să conectăm stilurile la al doilea punct de intrare:

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

Să efectuăm configurarea:

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

Ca rezultat, fișierul layout-ului va avea următoarea formă:

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

Realizați trei puncte de intrare. La fiecare punct conectați trei fișiere CSS. Efectuați build-ul. Asigurați-vă că automat sunt conectate toate bundle-urile.