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

বর্ণিত সেটিংসগুলি সম্পন্ন করুন।