რამდენიმე სტილების ბანდლი ვებპაკის მაკეტში

დავუშვათ, ახლა გვაქვს რამდენიმე შესვლის წერტილი, რომლებიც იკრიბებიან საკუთარ ბანდლებში. დავუშვათ, თითოეულ შესვლის წერტილთან იქნება დაკავშირებული საკუთარი CSS ფაილები. როგორც უკვე იცით, ამ შემთხვევაში თითოეული შესვლის წერტილისთვის იქნება საკუთარი CSS ბანდლი. Webpack ავტომატურად დააკავშირებს თითოეულ ამ ბანდლს.

პრაქტიკაში გადავამოწმოთ. პირველ შესვლის წერტილთან დავაკავშიროთ სტილები:

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

მეორე შესვლის წერტილთან დავაკავშიროთ სტილები:

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

შევასრულოთ კონფიგურაცია:

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

შედეგად, მაკეტის ფაილი ექნება შემდეგი სახე:

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

გააკეთეთ სამი შესვლის წერტილი. თითოეულ წერტილთან დააკავშირეთ სამი CSS ფაილი. შეასრულეთ შეგროვება. დარწმუნდით, რომ ავტომატურად არის დაკავშირებული ყველა ბანდლი.