Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про Webpack: development, production, webpack-merge

Как настроить Webpack для работы в разных средах (разработка, тестирование, производство)?

Этот вопрос проверяет умение адаптировать Webpack для различных целей

Короткий ответ

Webpack можно настроить для разных сред, используя отдельные файлы конфигурации или webpack-merge. В разработке важны HMR и исходные карты, а в продакшене — минификация и оптимизация ресурсов.

Длинный ответ

Для настройки Webpack под разные среды удобно использовать три отдельных файла конфигурации: webpack.common.js, webpack.dev.js, и webpack.prod.js.

 

Общая конфигурация (webpack.common.js):
Содержит базовые настройки, общие для всех сред.

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

 

Конфигурация для разработки (webpack.dev.js):
Акцент на быстродействие и удобство.

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
  },
});

 

Конфигурация для продакшена (webpack.prod.js):
Фокус на оптимизации.

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: ['...', new CssMinimizerPlugin()],
  },
});

 

С помощью webpack-merge можно объединять конфигурации в зависимости от среды. Это гибкий подход, позволяющий избежать дублирования кода.

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    5

  • Сложность:

    8

Навыки

  • Webpack

    Webpack

Ключевые слова

#development

#production

#webpack-merge

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию