Настройка сборки 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'],
			},
		],
	},
};

Выполните описанные настройки.