CSS-ի բանդլի հավաքման կարգաբերումը Webpack-ում

Էջում 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'],
			},
		],
	},
};

Կատարեք նկարագրված կարգաբերումները: