Webpack-da bir nechta CSS bundle-lari

Agar bir nechta kirish nuqtalari bitta faylga birlashtirilsa, unda CSS yig'ish fayli ham ular uchun bitta bo'ladi. Agar biz JavaScriptni bir nechta bundle-larga yig'sak, unda ularning har biri uchun alohida CSS fayli yig'iladi.

Keling, buni misol bilan ko'rib chiqaylik. Faraz qilaylik, bizda bitta kirish nuqtasi bor va unga ba'zi stil fayllari import qilingan:

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

Faraz qilaylik, ikkinchi kirish nuqtasiga ham stil fayllari import qilingan:

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

Keling, sozlamalarni yozamiz:

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

Bunday sozlamalar natijasida ikki ta CSS bundle'i yig'iladi: test1.398db7afe3b52e94bb25.css va test2.1d12c304c284a752cb9a.css.

Uchta kirish nuqtasini yarating. Har biriga o'zingizning CSS fayllaringizni ulang. Yig'ishni bajaring va natija qanday bo'lishini tekshiring.