Синтаксис подключения: inline, через config, через CLI

Webpack предоставляет несколько способов задания параметров сборки, которые отличаются уровнем гибкости, удобством и областью применения. Эти способы можно условно разделить на три подхода: inline-конфигурация через API вызова, конфигурационный файл и параметры командной строки. Каждый из них используется в разных сценариях разработки и может комбинироваться с другими.

Inline-подключение через Node.js API

Inline-подключение Webpack выполняется напрямую через вызов функции сборки в Node.js-коде. В этом случае Webpack импортируется как модуль и получает конфигурационный объект непосредственно в момент выполнения.

Основной метод — webpack(config, callback):

const webpack = require('webpack');

const config = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

webpack(config, (err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(stats.toString({
    colors: true
  }));
});

Особенности inline-подключения

Inline-подход используется тогда, когда требуется программное управление процессом сборки:

  • динамическая генерация конфигурации;
  • интеграция Webpack в собственные build-системы;
  • запуск сборки как части Node.js-скрипта;
  • создание кастомных инструментов поверх Webpack.

Конфигурация в этом случае формируется на лету, что позволяет учитывать внешние условия:

const mode = process.env.NODE_ENV || 'development';

const config = {
  mode,
  entry: './src/index.js',
  output: {
    filename: mode === 'production' ? 'bundle.min.js' : 'bundle.js',
    path: __dirname + '/dist'
  }
};

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

Более низкоуровневый вариант inline-подключения — создание экземпляра компилятора:

const webpack = require('webpack');

const compiler = webpack(config);

compiler.run((err, stats) => {
  console.log(stats.toString());
});

Также доступен режим наблюдения:

compiler.watch({}, (err, stats) => {
  console.log('Rebuild completed');
});

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

Подключение через конфигурационный файл

Основной и наиболее распространённый способ работы с Webpack — использование конфигурационного файла. По умолчанию он называется webpack.config.js и экспортирует объект настроек.

Базовая структура конфигурации

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

Webpack автоматически ищет этот файл при запуске команды сборки без дополнительных параметров.

Использование модулей конфигурации

Конфигурация может быть представлена как функция, возвращающая объект. Это позволяет динамически изменять параметры:

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.js',
    output: {
      filename: isProduction ? 'bundle.min.js' : 'bundle.js',
      path: __dirname + '/dist'
    },
    mode: isProduction ? 'production' : 'development'
  };
};

Несколько конфигураций

Webpack поддерживает экспорт массива конфигураций, что позволяет собирать несколько бандлов за один запуск:

module.exports = [
  {
    name: 'client',
    entry: './src/client.js',
    output: {
      filename: 'client.bundle.js',
      path: __dirname + '/dist'
    }
  },
  {
    name: 'admin',
    entry: './src/admin.js',
    output: {
      filename: 'admin.bundle.js',
      path: __dirname + '/dist'
    }
  }
];

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

Разделение конфигураций по средам

Часто применяется разделение конфигурации на базовую и окружения:

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

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

Такой подход позволяет изолировать общие настройки от специфичных параметров окружения.

Подключение через CLI (Command Line Interface)

Webpack CLI позволяет передавать параметры сборки прямо через командную строку без изменения конфигурационного файла.

Базовый запуск

webpack

При этом используется конфигурация по умолчанию или webpack.config.js.

Явное указание входа и выхода

webpack ./src/index.js --output-filename bundle.js --output-path dist

CLI позволяет переопределить ключевые параметры конфигурации:

  • entry;
  • output;
  • mode;
  • devtool;
  • watch.

Указание режима

webpack --mode production

или

webpack --mode development

Режим влияет на оптимизацию, минификацию и структуру выходного кода.

Использование watch-режима

webpack --watch

Webpack начинает отслеживать изменения файлов и автоматически пересобирает проект.

Использование конфигурационного файла через CLI

Можно явно указать путь к конфигурации:

webpack --config webpack.prod.js

Это удобно при наличии нескольких конфигураций для разных окружений.

Передача переменных окружения

CLI позволяет передавать пользовательские переменные:

webpack --env production

В конфигурационном файле они доступны как параметр функции:

module.exports = (env) => {
  return {
    mode: env === 'production' ? 'production' : 'development'
  };
};

Сравнение способов подключения

Inline-подключение через Node.js API предоставляет максимальную гибкость и используется в кастомных сборочных системах, где Webpack является частью более сложного процесса.

Конфигурационный файл представляет стандартный подход, обеспечивающий структурированность, масштабируемость и удобство сопровождения. Он является основным инструментом в большинстве проектов.

CLI-способ ориентирован на быстрые команды, прототипирование и сценарии, где нет необходимости в сложной настройке.

Взаимодействие методов между собой

Все три способа не являются взаимоисключающими. CLI фактически использует конфигурационный файл и может передавать параметры, которые модифицируют его поведение. Inline-API может использовать ту же конфигурацию, что и CLI, импортируя её как модуль.

Типичный сценарий комбинирования:

  • базовая конфигурация хранится в webpack.config.js;
  • CLI используется для переключения режимов;
  • Node.js API применяется для интеграции в сторонние инструменты.

Порядок приоритета параметров

При одновременном использовании нескольких источников конфигурации действует определённая иерархия:

  1. параметры CLI;
  2. переменные окружения;
  3. значения в конфигурационном файле;
  4. значения по умолчанию Webpack.

Это важно при отладке, поскольку итоговая конфигурация может отличаться от ожидаемой из-за переопределений.

Динамическая конфигурация и практическое применение

В реальных проектах конфигурация Webpack часто становится динамической системой, где каждый источник подключения используется в своей зоне ответственности:

  • CLI управляет режимом сборки;
  • конфигурационный файл описывает структуру проекта;
  • Node.js API используется для автоматизации и кастомных задач.

Такой подход позволяет масштабировать сборку без усложнения базовой конфигурации и сохранять контроль над процессом на всех уровнях.

Оглавление