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 файлини уланг. Бандлни ясанг. Барча бандллар автомат равишда уланишига ишонч ҳосил қилинг.