Webpack 5: production-ориентированный webpack.config.js (2026)

Нужен минимальный production-конфиг Webpack 5: минификация, contenthash для кэша, быстрые повторные сборки и корректный порядок разрешения расширений. Проблема: без mode production и filesystem cache прод-сборка тяжёлая и каждый раз «с нуля»; без contenthash в именах файлов кэш браузера неэффективен. Симптомы: долгий build, одинаковые имена чанков при каждом билде, путаница .ts/.js при импортах. Ниже — конфиг на официальном API (webpack.js.org/configuration): mode, output с contenthash, filesystem cache, resolve.extensions, babel-loader; проверка и когда Webpack оправдан.

Решение

Конфигурация использует только официальный API Webpack 5, без deprecated loaders и устаревших опций.

const path = require('node:path');

module.exports = {
  mode: 'production',

  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    clean: true,
  },

  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },

  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

• mode: ‘production’ — минификация (Terser), tree shaking. Без него прод-сборка тяжёлая.
• [contenthash] — хэш от содержимого; при неизменном коде имена не меняются, браузер кэширует. Чанки с dynamic import — в chunkFilename.
• cache.type: ‘filesystem’ — в production по умолчанию кэш выключен; без него каждый build полный. Filesystem сохраняет кэш в node_modules/.cache/webpack; повторный build пересобирает только изменённые модули. В CI можно кэшировать эту директорию.
• resolve.extensions — порядок важен: .ts/.tsx в начале, чтобы не подхватывать .js раньше TypeScript.
• Файл в корне как webpack.config.js. Для CSS — правило с css-loader и style-loader (или mini-css-extract-plugin для prod).

Когда Webpack оправдан: крупный legacy на Webpack; Module Federation / микрофронты; жёсткие требования к чанкингу и пайплайну; команда уже на Webpack. Для новых проектов без этого часто разумнее Vite или Turbopack.

Проверка

1. Сборка — выполните npm run build (скрипт в package.json: "build": "webpack"). Должна создаться папка dist с файлами вида main.[contenthash].js. Ошибок быть не должно.

2. Contenthash — дважды соберите без изменений кода: имена файлов должны совпадать. Измените один файл и соберите снова — у изменённого чанка должен смениться хэш в имени.

3. Кэш — после первой сборки проверьте наличие node_modules/.cache/webpack. Второй запуск build должен быть заметно быстрее (пересобираются только изменённые модули). При изменении конфига кэш инвалидируется за счёт buildDependencies.config.

4. Расширения — импорт без расширения (например import './utils') должен резолвиться в порядке extensions; для TypeScript убедитесь, что в проекте есть .babelrc или babel.config.js с preset-typescript (и при необходимости preset-react для JSX).

Типичные ошибки

• Без mode: ‘production’ — сборка не минифицируется, tree shaking слабее. Для прод всегда указывайте mode или передавайте его через CLI.
• Кэш не включён — в production по умолчанию кэш отключён. Без cache: { type: 'filesystem' } каждый build полный; на больших проектах это минуты. Включите и при необходимости кэшируйте node_modules/.cache/webpack в CI.
• DefinePlugin / process.env — в этом конфиге их нет; если в коде используется process.env.NODE_ENV, добавьте DefinePlugin или при миграции на Vite см. Webpack → Vite.
• CSS не обрабатывается — конфиг выше только JS/TS. Для стилей добавьте правило с css-loader и style-loader (dev) или mini-css-extract-plugin (prod).

Где применять

• Legacy и существующие проекты на Webpack: обновление до Webpack 5, включение filesystem cache и contenthash. Продакшн-сборка и CI.
• Сравнение с Vite: для новых проектов см. Vite production-конфиг и миграция Webpack → Vite.

Связанные сниппеты: Vite: production-конфиг 2026, Миграция Webpack → Vite.