Рекомендуемые значения для development и production

Режим разработки в Webpack ориентирован на максимальную скорость сборки, удобство отладки и быстрое обновление приложения при изменениях кода. В этом режиме приоритет отдаётся не размеру бандла и не оптимизации, а скорости пересборки и информативности ошибок.

mode: "development"

Базовая настройка, которая активирует ряд внутренних оптимизаций:

  • отключение минификации
  • включение полезных предупреждений
  • более подробные сообщения об ошибках
  • оптимизация под скорость сборки
module.exports = {
  mode: "development"
};

devtool для разработки

Ключевой параметр, влияющий на качество отладки.

Наиболее часто используемые значения:

eval-source-map

  • максимально точные source maps
  • хорошая связка скорости и качества
  • подходит для большинства проектов

eval-cheap-module-source-map

  • быстрее, чем полный source-map
  • упрощённые source maps
  • подходит для больших проектов
module.exports = {
  devtool: "eval-source-map"
};

Выбор зависит от размера проекта:

  • небольшие приложения: eval-source-map
  • крупные проекты: eval-cheap-module-source-map

devServer как основной инструмент разработки

Webpack Dev Server обеспечивает горячую перезагрузку и работу без ручного пересборки.

Рекомендуемая конфигурация:

devServer: {
  hot: true,
  open: true,
  port: 3000,
  historyApiFallback: true,
  compress: false,
  client: {
    overlay: true
  }
}

Ключевые параметры:

  • hot: true — включение HMR
  • historyApiFallback — важно для SPA (React, Vue)
  • overlay — отображение ошибок прямо в браузере
  • compress: false — ускорение сборки

Оптимизация поведения сборки в development

В режиме разработки важно отключить всё, что замедляет пересборку:

optimization: {
  minimize: false,
  removeAvailableModules: false,
  removeEmptyChunks: false,
  splitChunks: false
}

Причина:

  • минимизация не нужна
  • разделение чанков замедляет сборку
  • важна скорость HMR

Режим production и рекомендуемые настройки

Production режим ориентирован на минимальный размер бандла, высокую производительность и отсутствие лишнего кода.

mode: "production"

module.exports = {
  mode: "production"
};

Этот режим автоматически включает:

  • минификацию
  • tree-shaking
  • оптимизацию модулей
  • отключение предупреждений разработки

Минификация и оптимизация кода

Webpack по умолчанию использует TerserPlugin для JS:

optimization: {
  minimize: true
}

Дополнительные настройки:

const TerserPlugin = require("terser-webpack-plugin");

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
}

Удаление console.log и отладочного кода существенно уменьшает размер итогового бандла.

devtool в production

В production важно либо отключить source maps, либо использовать безопасные варианты.

Рекомендуемые значения:

source-map

  • полный source map
  • подходит для debugging production ошибок

hidden-source-map

  • source map генерируется, но не доступен пользователю
module.exports = {
  devtool: "source-map"
};

Для публичных приложений часто используют:

devtool: "hidden-source-map"

Разделение кода (code splitting)

Production режим обязательно должен включать разделение чанков:

optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all"
      }
    }
  }
}

Эффект:

  • уменьшение размера initial bundle
  • улучшение кеширования браузера
  • ускорение повторных загрузок

Tree Shaking

Tree shaking работает только в production при использовании ES Modules.

Ключевые условия:

  • mode: "production"
  • sideEffects: false или корректно настроенный флаг в package.json
  • использование import/export, а не CommonJS
{
  "sideEffects": false
}

Настройки производительности

performance: {
  hints: "warning",
  maxAssetSize: 250000,
  maxEntrypointSize: 250000
}

В production это помогает контролировать размер бандла.

В development часто отключают:

performance: false

Кеширование в production

Для ускорения загрузки и повторного использования ресурсов:

output: {
  filename: "[name].[contenthash].js",
  clean: true
}

Использование:

  • [contenthash] — кеширование файлов
  • clean: true — удаление старых сборок

Различия между development и production в ключевых параметрах

Скорость vs оптимизация

  • development: скорость сборки и HMR
  • production: минимальный размер и оптимизация загрузки

Source maps

  • development: быстрые и подробные (eval-source-map)
  • production: безопасные или отключённые (source-map, hidden-source-map)

Минификация

  • development: выключена
  • production: включена (TerserPlugin)

SplitChunks

  • development: обычно выключен
  • production: включен для оптимизации кеша

Переключение конфигурации через переменные окружения

Часто используется единый конфиг:

module.exports = (env, argv) => {
  const isProd = argv.mode === "production";

  return {
    mode: isProd ? "production" : "development",
    devtool: isProd ? "source-map" : "eval-source-map",
    optimization: {
      minimize: isProd
    }
  };
};

Такой подход позволяет:

  • избегать дублирования конфигурации
  • централизовать управление режимами
  • упрощать поддержку проекта

Поведение HMR и rebuild в разных режимах

В development:

  • активен Hot Module Replacement
  • пересборка происходит инкрементально
  • обновление модуля без перезагрузки страницы

В production:

  • HMR отсутствует
  • сборка полностью статическая
  • приоритет — стабильность результата

Влияние режима на плагины

Некоторые плагины ведут себя по-разному:

  • DefinePlugin часто используется для process.env.NODE_ENV
  • MiniCssExtractPlugin активен только в production
  • React Refresh работает только в development
new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
});

Практическая структура конфигурации

Типичный подход — разделение конфигов:

  • webpack.common.js
  • webpack.dev.js
  • webpack.prod.js

Это позволяет:

  • разделить ответственность
  • уменьшить сложность конфигурации
  • управлять режимами независимо
Оглавление