Командная строка интерфейса

Для правильного использования и более легкой дистрибуции этого конфигурационного файла, webpack можно настроить с помощью webpack.config.js. Любые параметры, переданные в командную строку, будут сопоставлены с соответствующим параметром в файле конфигурации.

Прочитайте руководство по установке, если у вас еще нет установленных webpack и CLI.

Команды

webpack-cli предлагает множество команд, чтобы облегчить работу с webpack. По умолчанию webpack поставляется с

Команда	Использование	Описание
build	build|bundle|b [entries...] [options]	Запустить webpack (команда по умолчанию, может быть опущена).
configtest	configtest|t [config-path]	Проверить конфигурацию webpack.
help	help|h [command] [option]	Отобразить справку по командам и опциям.
info	info|i [options]	Выводит информацию о вашей системе.
init	init|create|c|new|n [generation-path] [options]	Инициализировать новый проект webpack.
loader	loader|l [output-path] [options]	Создать загрузчик.
plugin	plugin|p [output-path] [options]	Создать плагин.
serve	serve|server|s [options]	Запустить webpack-dev-server.
version	version|v [commands...]	Вывести номер версии webpack, webpack-cli и webpack-dev-server.
watch	watch|w [entries...] [options]	Запустить webpack и следить за изменениями файлов.

Сборка

Запустить webpack (команда по умолчанию, может быть опущена).

npx webpack build [options]

пример

npx webpack build --config ./webpack.config.js --stats verbose

Инициализация

Используется для инициализации нового проекта webpack.

npx webpack init [generation-path] [options]

пример

npx webpack init ./my-app --force --template=default

Путь к генерации

Местоположение, где нужно сгенерировать конфигурацию. По умолчанию process.cwd().

Опции

-t, --template

string = 'default'

Имя шаблона для генерации.

-f, --force

boolean

Для генерации проекта без вопросов. При включении, используется ответ по умолчанию для каждого вопроса.

Загрузчик

Создать загрузчик.

npx webpack loader [output-path] [options]

пример

npx webpack loader ./my-loader --template=default

Путь к выводу

Путь к выходной директории, например ./loader-name.

Опции

-t, --template

string = 'default'

Тип шаблона.

Плагин

Создать плагин.

npx webpack plugin [output-path] [options]

пример

npx webpack plugin ./my-plugin --template=default

Путь к выводу

Путь к выходной директории, например ./plugin-name.

Опции

-t, --template

string = 'default'

Тип шаблона.

Информация

Выводит информацию о вашей системе.

npx webpack info [options]

пример

npx webpack info --output json --addition-package postcss

Опции для получения информации

-a, --additional-package

string

Добавляет дополнительные пакеты в вывод.

пример

npx webpack info --additional-package postcss

-o, --output

string : 'json' | 'markdown'

Для получения вывода в указанном формате.

пример

npx webpack info --output markdown

Проверка конфигурации

Проверить конфигурацию webpack.

npx webpack configtest [config-path]

пример

npx webpack configtest ./webpack.config.js

Путь к конфигурации

Путь к файлу вашей конфигурации webpack. По умолчанию ./webpack.config.js.

Сервис

Запустить сервер webpack dev.

npx webpack serve [options]

пример

npx webpack serve --static --open

Наблюдение

Запустить webpack и следить за изменениями файлов.

npx webpack watch [options]

пример

npx webpack watch --mode development

Флаги

По умолчанию webpack поставляется со следующими флагами:

Флаг / Псевдоним	Тип	Описание
--entry	массив строк	Точка входа (точки) вашего приложения, например ./src/main.js
--config, -c	массив строк	Указать путь к файлу конфигурации webpack, например ./webpack.config.js
--config-name	массив строк	Имя используемой конфигурации
--name	строка	Имя конфигурации. Используется при загрузке нескольких конфигураций
--color	логическое значение	Включить цветной вывод в консоли
--merge, -m	логическое значение	Объединить две или более конфигураций с помощью webpack-merge
--env	массив строк	Переменная среды, передаваемая в конфигурацию, если она является функцией
--define-process-env-node-env	строка	Установить process.env.NODE_ENV на указанное значение
--progress	логическое значение, строка	Выводить прогресс компиляции во время сборки
--help	логическое значение	Выводит список поддерживаемых флагов и команд
--output-path, -o	строка	Местоположение вывода файла, созданного webpack, например ./dist
--target, -t	массив строк	Устанавливает целевой режим сборки
--watch, -w	логическое значение	Следить за изменениями файлов
--watch-options-stdin	логическое значение	Остановить отслеживание при завершении потока ввода
--devtool, -d	строка	Управление генерацией карт исходного кода.
--json, -j	логическое значение, строка	Вывести результат как JSON или сохранить в файл
--mode	строка	Определяет режим, передаваемый в webpack
--version, -v	логическое значение	Получить текущую версию
--stats	логическое значение, строка	Указывает webpack, как обрабатывать статистику
--disable-interpret	логическое значение	Отключить интерпретацию для загрузки файла конфигурации.
--fail-on-warnings	логическое значение	Прекратить процесс webpack-cli с ненулевым кодом выхода при возникновении предупреждений webpack
--analyze	логическое значение	Вызывает плагин webpack-bundle-analyzer для получения информации о пакете
--extends, -e	массив строк	Расширить существующую конфигурацию

Отмененные флаги

Флаг	Описание
--no-color	Отключает любые цвета в консоли
--no-hot	Отключает горячую перезагрузку, если она включена в конфигурации
--no-stats	Отключает вывод статистики компиляции, выводимой webpack
--no-watch	Не следить за изменениями файлов
--no-devtool	Не генерировать карты исходных данных
--no-watch-options-stdin	Не останавливать наблюдение при завершении потока stdin

Основные флаги

Начиная с версии CLI v4 и webpack v5, CLI импортирует всю схему конфигурации из ядра webpack, что позволяет настраивать почти все параметры конфигурации из командной строки.

Вот список всех основных флагов, поддерживаемых webpack v5 с CLI v4 - ссылка

Например, если вы хотите включить подсказки производительности в своем проекте, вы бы использовали этот параметр в конфигурации, с помощью флагов ядра вы можете сделать следующее -

npx webpack --performance-hints warning

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

С файлом конфигурации

npx webpack [--config webpack.config.js]

См. конфигурацию для параметров в файле конфигурации.

Без файла конфигурации

npx webpack --entry <entry> --output-path <output-path>

пример

npx webpack --entry ./first.js --entry ./second.js --output-path /build

entry

Имя файла или набор именованных файлов, которые служат точкой входа в построение вашего проекта. Вы можете передавать несколько точек входа (каждая точка входа загружается при запуске). Ниже приведены несколько способов указания файла(ов) входа через командную строку -

npx webpack --entry-reset ./first-entry.js

npx webpack --entry-reset --entry ./first-entry.js

npx webpack --entry-reset ./first-entry.js ./other-entry.js

npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js

output-path

Путь для сохранения скомпонованного файла. Он будет сопоставлен с параметрами конфигурации output.path.

Пример

Если структура вашего проекта выглядит следующим образом -

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js

npx webpack ./src/index.js --output-path dist

Это скомпонует ваш исходный код с входной точкой index.js, а файл выходного пакета будет иметь путь dist.

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 187 ms

npx webpack ./src/index.js ./src/others2.js --output-path dist/

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

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others2.js 1 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 198 ms

Конфигурации по умолчанию

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

Вот приоритет поиска конфигураций, в порядке возрастания

например - поиск файла конфигурации будет в порядке .webpack/webpackfile > .webpack/webpack.config.js > webpack.config.js

'webpack.config',
'.webpack/webpack.config',
'.webpack/webpackfile',

Общие параметры

help

Список основных команд и флагов, доступных в cli

Оба webpack help [command] [option] и webpack [command] --help подходят для получения справки:

npx webpack --help

# or

npx webpack help

Список всех поддерживаемых команд и флагов cli

npx webpack --help=verbose

См. справку по конкретной команде или параметру

npx webpack help --mode

version

Показать версию установленных пакетов и подпакетов

Чтобы проверить версию webpack и webpack-cli, которые вы используете, выполните команду:

npx webpack --version

# or

npx webpack version

Это выведет следующий результат:

webpack 5.31.2
webpack-cli 4.6.0

Он также выведет версию webpack-dev-server, если она установлена:

webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

Чтобы проверить версию любого webpack-cli подпакета (например, @webpack-cli/info), выполните команду, похожую на следующую:

npx webpack info --version

Это выведет следующий результат:

@webpack-cli/info 1.2.3
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

config

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

Укажите другой файл конфигурации, отличный от webpack.config.js, который является одним из значений по умолчанию.

npx webpack --config example.config.js

config-name

В случае, если ваш файл конфигурации экспортирует несколько конфигураций, вы можете использовать --config-name для указания конфигурации, которую нужно запустить.

Рассмотрим следующую webpack.config.js:

module.exports = [
  {
    output: {
      filename: './dist-first.js',
    },
    name: 'first',
    entry: './src/first.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-second.js',
    },
    name: 'second',
    entry: './src/second.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-third.js',
    },
    name: 'third',
    entry: './src/third.js',
    mode: 'none',
    stats: 'verbose',
  },
];

Чтобы запустить только конфигурацию second:

npx webpack --config-name second

Вы также можете передать несколько значений:

npx webpack --config-name first --config-name second

merge

Вы можете объединить две или более различных конфигураций webpack с помощью --merge:

npx webpack --config ./first.js --config ./second.js --merge

extends

webpack-cli v5.1.0+

Вы можете расширить существующие конфигурации webpack с помощью --extends:

npx webpack --extends ./base.webpack.config.js

Подробнее об этом в расширении конфигураций.

json

Вывести результат webpack в формате JSON

npx webpack --json

Если вы хотите сохранить статистику в формате json вместо ее вывода, вы можете использовать -

npx webpack --json stats.json

Во всех остальных случаях webpack выводит набор статистики, показывающей информацию о пакете, пакете и времени. Используя этот параметр, вывод может быть объектом JSON. Этот ответ принимается инструментом анализа webpack analyse, или инструментом chrisbateman's webpack-visualizer, или инструментом th0r's webpack-bundle-analyzer. Инструмент анализа примет JSON и предоставит все детали сборки в графическом виде.

Параметры среды

Когда конфигурация webpack экспортирует функцию, ей может быть передан «среда».

env

npx webpack --env production    # env.production = true

Аргумент --env принимает несколько значений:

Вызов	Результат среды
npx webpack --env prod	{ prod: true }
npx webpack --env prod --env min	{ prod: true, min: true }
npx webpack --env platform=app --env production	{ platform: "app", production: true }
npx webpack --env foo=bar=app	{ foo: "bar=app"}
npx webpack --env app.platform="staging" --env app.name="test"	{ app: { platform: "staging", name: "test" }

В дополнение к настраиваемой env выше, есть некоторые встроенные значения в env для использования в вашей конфигурации webpack:

Переменная среды	Описание
WEBPACK_SERVE	true если используется serve|server|s.
WEBPACK_BUILD	true если используется build|bundle|b.
WEBPACK_WATCH	true если используется --watch|watch|w.

Обратите внимание, что вы не можете получить доступ к этим встроенным переменным среды внутри скомпонованного кода.

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

node-env

Вы можете использовать параметр --node-env для установки process.env.NODE_ENV, который доступен как для пользовательского кода, так и для конфигурации webpack:

npx webpack --node-env production   # process.env.NODE_ENV = 'production'

define-process-env-node-env

Для webpack-cli v5+.

Псевдоним для --node-env для установки process.env.NODE_ENV:

npx webpack --define-process-env-node-env production   # process.env.NODE_ENV = 'production'

Когда параметр mode не указан в конфигурации, вы можете использовать параметр --define-process-env-node-env для установки mode. Например, использование --define-process-env-node-env production установит как process.env.NODE_ENV, так и mode в значение 'production'.

Если ваша конфигурация экспортирует функцию, значение --define-process-env-node-env присваивается параметру mode после возврата функции. Это означает, что mode не будет доступно в аргументах функции (env и argv). Однако значение --define-process-env-node-env доступно как argv.nodeEnv внутри функции и может быть использовано соответствующим образом.

module.exports = (env, argv) => {
  console.log(argv.defineProcessEnvNodeEnv); // 'production' if --define-process-env-node-env production is used
  return {
    // your configuration
  };
};

Параметры конфигурации

Параметр	Описание	Тип ввода	Значение по умолчанию
--config	Путь к файлу конфигурации	строка[]	Конфигурации по умолчанию
--config-name	Имя конфигурации для использования	строка[]	-
--env	Среда, передаваемая конфигурации, когда это функция	строка[]	-

Анализ пакета

Также можно использовать webpack-bundle-analyzer для анализа выходных пакетов, созданных webpack. Можно использовать флаг --analyze для вызова через командную строку.

npx webpack --analyze

Прогресс

Для проверки прогресса любой компиляции webpack можно использовать флаг --progress.

npx webpack --progress

Для сбора данных профиля для шагов прогресса можно передать profile в качестве значения флага --progress.

npx webpack --progress=profile

Передача аргументов командной строки в Node.js

Чтобы передать аргументы непосредственно в процесс Node.js, можно использовать опцию NODE_OPTIONS.

Например, чтобы увеличить лимит памяти процесса Node.js до 4 ГБ

NODE_OPTIONS="--max-old-space-size=4096" webpack

Также можно передать несколько опций в процесс Node.js

NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack

Коды выхода и их значения

Код выхода	Описание
0	Успех
1	Ошибки от webpack
2	Проблема с настройками/опциями или внутренняя ошибка

Переменные среды командной строки

Переменная среды	Описание
WEBPACK_CLI_SKIP_IMPORT_LOCAL	при использовании true, будет пропущена загрузка локальной инстанции webpack-cli.
WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG	при использовании true, будет принудительно загружен конфигурации ESM.
WEBPACK_PACKAGE	Использование пользовательской версии webpack в командной строке.
WEBPACK_DEV_SERVER_PACKAGE	Использование пользовательской версии webpack-dev-server в командной строке.
WEBPACK_CLI_HELP_WIDTH	Использование пользовательской ширины для вывода справки.

WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm

WEBPACK_PACKAGE

Использование пользовательской версии webpack в командной строке. Учитывая следующее содержание в вашем package.json:

{
  "webpack": "^4.0.0",
  "webpack-5": "npm:webpack@^5.32.0",
  "webpack-cli": "^4.5.0"
}

Для использования webpack v4.0.0:

npx webpack

Для использования webpack v5.32.0:

WEBPACK_PACKAGE=webpack-5 npx webpack

Поиск и устранение неполадок

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Неизвестное расширение файла ".ts" для ./webpack.config.ts

Вы можете столкнуться с этой ошибкой в случае использования нативного ESM в TypeScript (например, type: "module" в package.json).

webpack-cli поддерживает конфигурацию в формате CommonJS и ESM, сначала он пытается загрузить конфигурацию с помощью require(), как только это происходит с кодом ошибки 'ERR_REQUIRE_ESM' (специальный код для этого случая), он пытается загрузить конфигурацию с помощью import(). Однако, метод import() не будет работать с ts-node без механизмов загрузки, включенных (описано в TypeStrong/ts-node#1007).

Чтобы исправить ошибку выше, используйте следующую команду:

NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production

Дополнительную информацию можно найти в нашей документации по созданию конфигурации webpack на TypeScript.