Mitme CSS-i bundli kasutamine Webpacki maketis

Oletame nüüd, et meil on mitu sissepääsupunkti, mis kogutakse oma bundlitesse. Las iga sissepääsupunktiga ühendatakse oma CSS failid. Nagu juba teate, sel juhul on iga sissepääsupunkti jaoks oma CSS bundel. Webpack ühendab automaatselt kõik need bundlid.

Kontrollime seda praktikas. Ühendame stilid esimese sissepääsupunktiga:

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

Ühendame stilid teise sissepääsupunktiga:

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

Teeme seadistuse:

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

Tulemusena on maketi failil järgmine välimus:

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

Loo kolm sissepääsupunkti. Iga punktiga ühenda kolm CSS faili. Teosta bundlimine. Veendu, et automaatselt ühendatakse kõik bundlid.