Шаг 4. Оптимизация при сборке в production mode

На этом этапе нас интересует только файл webpack.prod.js.

В нём получилась следующая запись:

const FontminPlugin = require('fontmin-webpack');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
mode: 'production',
devtool: 'source-map',
plugins: [
  new FontminPlugin({
    autodetect: true,
    glyphs: ['\uf0c8'],
    allowedFilesRegex: null,
    skippedFilesRegex: null,
  }),
],
optimization: {
  splitChunks: {
    chunks: 'all',
  },
  minimizer: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: ['imagemin-gifsicle', 'imagemin-mozjpeg', 'imagemin-pngquant', 'imagemin-svgo'],
        },
      },
      loader: false,
    }),
    new CssMinimizerPlugin(),
  ],
},
};

Первые три строки подключают необходимые нам плагины. Мы явно указываем webpack-у на использование production-режима. А так как проект у нас тестовый, мы можем оставить включёнными карты исходников.

Теперь по порядку. Поле плагинов отвечает за подключение любых плагинов. Туда мы добавляем уже знакомый нам FontminPlugin с полями, взятыми из его описания.

Далее мы указываем встроенное поле optimization и даём сборщику самостоятельно разделять код на чанки — куски.

Далее мы обращаемся к доступному нам по умолчанию полю minimizer, которое принимает массив или объект со своими полями. Мы используем массив, в который добавим оптимизирующие плагины для изображений.

Сам плагин подключаем с помощью ключевого слова new. Когда мы вызываем инстанс класса, нам становятся доступны его поля. И первое доступное — minimizer.

Просто вызвать плагин для оптимизации изображений, как мы сделали это с CssMinimizerPlugin, не получится — его обязательно нужно настраивать.

В данном поле требуется указать, что нужно реализовать — тут мы обращаемся к самому пакету. А так как дополнительные уже установлены, нам становится доступна подсказка:

После этого плагин будет работать, но без «сверхоптимизаций». В этом нам помогут остальные пакеты, названия которых вы можете наблюдать в поле options ----> plugins. Их настраивать не нужно.