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

MiniCssExtractPlugin служит нам в качестве обработчика. Он может доставать все стили из JS-кода и создавать для них отдельный файл после сборки проекта. Но есть и обратная сторона.

Иногда при разработке приложений отпадает необходимость в вынесении стилей в отдельный файл. Дело в том, что современный JS имеет все возможности CSS, которые браузер понимает, и после сборки стили должны инлайниться в код в виде строки. Помним: «под капотом» всё, что есть в HTML и отображается пользователю на странице — строки.

Сейчас в нашем проекте стили написаны с использованием препроцессора SCSS и выглядят так:

После сборки все стили заинлайнены в код:

Для стилей конфиг максимально прост. Мы уже видели его в предыдущих демонстрациях, но сейчас будет одно незначительное отличие. В поле плагинов файла webpack.base.js мы просто вызываем наш плагин как новый инстанс класса:

  plugins: [].concat(
  fileName.map(
    (file) =>
      new HtmlWebpackPlugin({
        inject: 'head',
        template: `./${file}.html`,
        filename: `./${file}.html`,
        chunks: [file],
        minify: {
          html5: true,
          collapseWhitespace: true,
          removeComments: true,
          removeTagWhitespace: true,
        },
      }),
  ),
  [new MiniCssExtractPlugin()].filter(Boolean), // здесь добавляем плагины
),

После этого всё станет работать как на этапе разработки, так и при сборке, а стили будут заинлайнены в код.

Обработчики для стилей остаются теми же, как это было ранее сгенерировано командой nxp webpack init:

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

module.exports = {
  // остальной конфиг
  rules: [
    {
      test: /\.(s[ac]|c)ss$/i,
      use: [styleHandler, 'css-loader', 'sass-loader', 'postcss-loader'],
    }
  ]
}