Webpack-dä meýilnama da köp stil bändllary

Indi bizde birnäçe girýän nokady bolsun, olaryň her biri öz bändlyna ýygnalýar. Her girýän nokada öz CSS faýllary birikdirilen bolsun. Siziň öňden hem bildigiňiz ýaly, bu ýagdaýda her girýän nokat üçin öz CSS bändly bolar. Webpack bu bändllaryň her birini awtomatik birikdirer.

Amaly işde synap göreli. Stilleri birinji girýän nokada birikdireli:

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

Stilleri ikinji girýän nokada birikdireli:

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

Sazlamany ýerine ýetireli:

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

Netijede meýilnama faýly aşakdaky görnüşe ege bolar:

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

Üç girýän nokat düzüň. Her nokada üç CSS faýlyny birikdiriň. Ýygnaldy. Awtomatik ýagdaýda ähli bändllaryň birikdirilýändigine göz ýetiriň.