Шаг 5. MiniCssExtractPlugin и его настройка

Для работы со стилями нам нужен MiniCssExtractPlugin. Прежде всего он служит как обработчик, а потом уже плагин для вынесения стилей в отдельный файл.

В файле webpack.base.js в поле plugins вызываем новый инстанст класса от уже подключённого плагина:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProd = process.env.NODE_ENV === 'production';
const styleHandler = isProd ? MiniCssExtractPlugin.loader : 'style-loader';

plugins: [new MiniCssExtractPlugin()] // обращаемся как к плагину


module: {
  rules: [
    {
      test: /\.(s[ac]|c)ss$/i,
      use: [styleHandler, 'style-loader', 'css-loader', 'sass-loader']
    } // обращаемся как к обработчику для стилей
  ]
}

В результате все стили инлайнятся в код в виде строки, а также у нас в наличии имеется поддержка синтаксиса препроцессора SCSS.

Готово. Код получившегося конфига вы найдёте здесь.