Налада зборкі 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'],
			},
		],
	},
};

Выканайце апісаныя наладкі.