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 файлын туташтырыңыз. Чогултууну аткарыңыз. Бардык бандлдар автоматтык түрдө туташтырыла турганына көзүңүз менен ишенгиле.