वेबपैक में CSS बंडल बिल्ड सेटअप

पृष्ठ पर CSS जोड़ने का सीखा गया तरीका बहुत सफल नहीं हो सकता है। अक्सर अधिक सुविधाजनक होता है सभी CSS फाइलों को स्टाइल्स के साथ एक अलग बंडल में इकट्ठा करना।

इसके लिए प्लगइन की आवश्यकता होती है mini-css-extract-plugin. चलिए इसे इंस्टॉल करते हैं:

npm install mini-css-extract-plugin --save-dev

इसे आयात करते हैं:

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

कॉन्फ़िगरेशन plugins में जोड़ते हैं:

export default {
	entry: './src/index.js',
	plugins: [new MiniCssExtractPlugin()],
};

अब style-loader को हमारे प्लगइन के लोडर से बदलते हैं:

export default {
	entry: './src/index.js',
	plugins: [new MiniCssExtractPlugin()],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

वर्णित कॉन्फ़िगरेशन करें।