Ρύθμιση της συλλογής CSS σε bundle στο Webpack

Ο μελετημένος τρόπος προσθήκης CSS στη σελίδα μπορεί να μην είναι πολύ επιτυχημένος. Συχνά είναι πιο βολικό να συλλέγονται όλα τα αρχεία CSS σε ένα ξεχωριστό bundle με στυλ.

Για αυτό χρειάζεται το plugin 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 με τον loader από το plugin μας:

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

Εκτελέστε τις περιγραφείς ρυθμίσεις.