Webpack'те бир нече CSS бандлдар

Эгерде бир нече кириш чекиттери бир файлга биригип кетсе, анда алар үчүн бир гана CSS бирдик файлы түзүлөт. Эгерде биз JavaScript'ти бир нече бандлдарга чогултсак, анда ар бири үчүн өзүнчө CSS файлы түзүлөт.

Келгиле, мисал менен карап көрөлү. Бизде бир кириш чекити бар жана ага айрым стиль файлдары импорттолсун дейли:

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'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

Мына ушундай конфигурациянын натыйжасында эки CSS бандлы түзүлөт: test1.398db7afe3b52e94bb25.css жана test2.1d12c304c284a752cb9a.css.

Үч кириш чекитин жасаңыз. Ар бирине өзүнүн CSS файлдарын туташтырыңыз. Чогулттурууну ишке ашырып, натыйжада эмне чыгарын текшериңиз.