Шаг 3. Режим разработки и его настройка

Нам необходимо добиться максимальной производительности при работе с запущенным сервером разработки. Всё, что для этого нужно — настроить сам devServer в файле webpack.dev.js, не затрагивая base и prod-конфиги. Ведь из предыдущих статей мы знаем, что development-режим — самый быстрый, так как в нём нет оптимизаций, и нет никакой необходимости их туда добавлять.

Также давайте рассмотрим встроенные поля для оптимизации конфига, которые доступны нам «из коробки».

Мы имеем следующую запись:

const path = require('path');


module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
  },
  devServer: {
    static: {
      directory: path.join(__dirname, '../src/assets'),
    },
    allowedHosts: 'auto',
    open: true,
    compress: true,
    port: 3001,
    hot: false,
  },
};

removeAvailableModules — в автоматическом режиме указывает webpack-у, как находить и удалять неиспользуемые или повторяющиеся модули, что сильно замедляет разработку, так как он читает файловую систему проекта по кругу.

removeEmptyChunks — удаляет пустые фрагменты кода.

splitChunks — дробит код на отдельные файлы. Эту опцию мы рассматривали, применяя её при сборке проекта в production mode.

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

Далее мы включаем исходники, которые будут инлайниться. Это упростит нам дебаг на этапе разработки, даже если к самому коду применены преобразования, например, Babel переписал все let и const на var. Посмотреть исходники можно в консоли браузера.