Webpack-те макетте бірнеше стиль бандлдары

Енді бізде бірнеше кіру нүктелері бар делік, олар өз бандлдарына жиналады. Әр кіру нүктесіне өз 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 файлын қосыңыз. Жинақтауды орындаңыз. Барлық бандлдардың автоматты түрде қосылатынына көз жеткізіңіз.