Webpack-da bir nechta uslub bundllarini maktga ulash

Endi bizda bir nechta kirish nuqtalari borligini va ularning har biri o'zining bundliga yig'ilishini faraz qilaylik. Har bir kirish nuqtasiga o'zining CSS fayllari ulansin. Siz bilasizki, bu holda har bir kirish nuqtasi uchun alohida CSS bundli bo'ladi. Webpack avtomatik ravishda ushbu bundllarning har birini ulanadi.

Keling, amaliyotda tekshiramiz. Birinchi kirish nuqtasiga uslublarni ulaymiz:

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

Ikkinchi kirish nuqtasiga uslublarni ulaymiz:

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

Sozlamalarni bajaramiz:

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

Natijada, makt fayli quyidagi ko'rinishga ega bo'ladi:

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

Uchta kirish nuqtasini yarating. Har bir nuqtaga uchta CSS faylini ulang. Yig'ishni bajaring. Barcha bundllar avtomatik ulanganligiga ishonch hosil qiling.