Webpack'te Düzen İçinde Birden Fazla Stil Paketi

Şimdi diyelim ki birden fazla giriş noktamız var ve bunlar kendi paketlerine derleniyor. Her giriş noktasına kendi CSS dosyalarının bağlandığını varsayalım. Zaten bildiğiniz gibi, bu durumda her giriş noktası için kendi CSS paketi olacaktır. Webpack bu paketlerin her birini otomatik olarak bağlayacaktır.

Pratikte test edelim. İlk giriş noktasına stilleri bağlayalım:

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

İkinci giriş noktasına stilleri bağlayalım:

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

Yapılandırmayı yapalım:

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

Sonuç olarak, düzen dosyası aşağıdaki gibi olacaktır:

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

Üç giriş noktası oluşturun. Her noktaya üç CSS dosyası bağlayın. Derlemeyi gerçekleştirin. Tüm paketlerin otomatik olarak bağlandığından emin olun.