Keli stilių bundlai makete su Webpack

Tarkime, kad dabar turime kelis įėjimo taškus, kurie surenkami į savo bundlus. Tarkime, kad prie kiekvieno įėjimo taško bus prijungti savo CSS failai. Kaip jau žinote, šiuo atveju kiekvienam įėjimo taškui bus savo CSS bundlas. Webpack automatiškai prijungs kiekvieną iš šių bundlų.

Patikrinkime praktiškai. Prijunkime stilius prie pirmojo įėjimo taško:

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

Prijunkime stilius prie antrojo įėjimo taško:

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

Atlikime nustatymus:

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

Dėl to maketo failas atrodys taip:

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

Sukurkite tris įėjimo taškus. Prie kiekvieno taško prijunkite tris CSS failus. Atlikite surinkimą. Įsitikinkite, kad automatiškai yra prijungiami visi bundlai.