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

විස්තර කර ඇති සැකසුම් ක්‍රියාත්මක කරන්න.