Шаг 6. Сборка проекта со стилями и минимизация

Собрав проект в продакшн-режиме, мы получаем файл с расширением .css. Но код не минимизирован и выглядит так:

Давайте по порядку. За создание файла .css отвечает MiniCssExtractPlugin. Чтобы его подключить, нужно в поле plugins написать код:

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

new MiniCssExtractPlugin({
  filename: 'css/[name][contenthash].css',
})

В записи filename: 'css/[name]_[contenthash:8].css' мы просто указываем, где будет размещён файл.

MiniCssExtractPlugin не отвечает за минимизацию. Для этого потребуется отдельный легковесный пакет под названием CssMinimizerWebpackPlugin.

Установим его — введём в терминал команду npm i css-minimizer-webpack-plugin -D.

Добавим плагин:

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

После чего подключим его в поле plugins:

new CssMinimizerWebpackPlugin() // и всё

Теперь файл со стилями после сборки имеет следующий вид: