Шаг 3. Настройка установленных пакетов

После установки пакетов нам становятся доступны поля для их настроек.

Настраивать будем в файле webpack.prod.js:

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

Со шрифтами мы проводим те же манипуляции, что и в предыдущих демонстрациях. За основу взят код из описания к плагину на его странице npm.

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

Каждый из используемых плагинов в соответствующем поле отвечает за определённый формат картинок. Мы используем форматы JPG, JPEG и PNG. Но с заделом на будущее затронем и другие форматы: GIF и SVG.