Webpack में एकाधिक CSS बंडल

यदि कई एंट्री पॉइंट एक फ़ाइल में मर्ज होते हैं, तो CSS बिल्ड फ़ाइल भी उनके लिए एक ही होगी। यदि हम JavaScript को कई बंडलों में संकलित करते हैं, तो उनमें से प्रत्येक के लिए उसकी अपनी CSS फ़ाइल संकलित की जाएगी।

आइए एक उदाहरण देखें। मान लें कि हमारे पास एक एंट्री पॉइंट है और उसमें कुछ स्टाइल फ़ाइलें इम्पोर्ट की गई हैं:

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'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

ऐसे कॉन्फ़िगरेशन के परिणामस्वरूप दो CSS बंडल संकलित होंगे: test1.398db7afe3b52e94bb25.css और test2.1d12c304c284a752cb9a.css.

तीन एंट्री पॉइंट बनाएं। प्रत्येक में अपनी CSS फ़ाइलें कनेक्ट करें। असेंबली करें और जांचें कि परिणामस्वरूप क्या प्राप्त होता है।