Webpack'te Birden Fazla CSS Paketi

Eğer birden fazla giriş noktası bir dosyada birleştirilirse, onlar için bir CSS paket dosyası olacaktır. Ancak JavaScript'i birden fazla pakete derlersek, her biri için kendi CSS dosyası derlenecektir.

Bir örnekle inceleyelim. Bir giriş noktamız olduğunu ve bazı stil dosyalarının buraya içe aktarıldığını varsayalım:

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

İkinci bir giriş noktasına da stillerin içe aktarıldığını varsayalım:

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

Şimdi yapılandırma ayarlarını yazalı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'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

Bu yapılandırmanın sonucunda iki CSS paketi derlenecektir: test1.398db7afe3b52e94bb25.css ve test2.1d12c304c284a752cb9a.css.

Üç giriş noktası oluşturun. Her birine kendi CSS dosyalarını bağlayın. Derleme yapın ve sonuçta ne elde edildiğini kontrol edin.