Spec-Zone.ru › webpack 4

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

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

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

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

webpack [--config webpack.config.js]

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

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

webpack <entry> [<entry>] -o <output>

<entry>

Имя файла или набор имён файлов, которые служат точкой входа для сборки вашего проекта. Вы можете передать несколько точек входа (каждая точка входа загружается при запуске). Если вы передаёте пару в формате <name>=<request>, вы можете создать дополнительную точку входа. Она будет сопоставлена с параметром конфигурации entry.

<output>

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

Пример

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

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js
webpack src/index.js -o dist/bundle.js

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

	| Asset     | Size    | Chunks      | Chunk Names |
	|-----------|---------|-------------|-------------|
	| bundle.js | 1.54 kB | 0 [emitted] | index       |
	[0] ./src/index.js 51 bytes {0} [built]
	[1] ./src/others.js 29 bytes {0} [built]
webpack index=./src/index.js entry2=./src/index2.js -o dist/bundle.js

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

	| Asset     | Size    | Chunks        | Chunk Names   |
	|-----------|---------|---------------|---------------|
	| bundle.js | 1.55 kB | 0,1 [emitted] | index, entry2 |
	[0] ./src/index.js 51 bytes {0} [built]
	[0] ./src/index2.js 54 bytes {1} [built]
	[1] ./src/others.js 29 bytes {0} {1} [built]

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

Обратите внимание, что командная строка интерфейса имеет более высокий приоритет для аргументов, с которыми вы её используете, чем ваш файл конфигурации. Например, если вы передаёте --mode="production" в webpack CLI, а в вашем файле конфигурации используется development, будет использоваться production.

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

webpack --help
webpack -h

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

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

webpack --config example.config.js

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

webpack --json
webpack --json > stats.json

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

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

Когда webpack-конфигурация экспортирует функцию, в неё может быть передан параметр "среда".

webpack --env.production    # sets env.production == true
webpack --env.platform=web  # sets env.platform == "web"

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

Вызов Результирующая среда

webpack --env prod

"prod"

 "prod"

webpack --env.prod

{ prod: true }

 { prod: true }

webpack --env.prod=1

{ prod: 1 }

 { prod: 1 }

webpack --env.prod=foo

{ prod: "foo" }

 { prod: "foo" }

webpack --env.prod --env.min

{ prod: true, min: true }

 { prod: true, min: true }

webpack --env.prod --env min

[{ prod: true }, "min"]

 [{ prod: true }, "min"]

webpack --env.prod=foo --env.prod=bar

{prod: [ "foo", "bar" ]}

 {prod: [ "foo", "bar" ]}

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

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

Параметр Описание Тип ввода Значение по умолчанию

--config

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

 Путь к файлу конфигурации строка webpack.config.js или webpackfile.js

--config-register, -r

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

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

--config-name

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

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

--env

Среда, передаваемая в конфигурацию, если она функция

 Среда, передаваемая в конфигурацию, если она функция

--mode

Используемый режим, "development" или "production"

 Используемый режим, "development" или "production" строка

Параметры вывода

Этот набор параметров позволяет управлять определёнными параметрами вывода вашей сборки.

Параметр Описание Тип ввода Значение по умолчанию

--output-chunk-filename

Имя выходного файла для дополнительных пакетов

 Имя выходного файла для дополнительных пакетов строка имя файла с [id] вместо [name] или [id] в префиксе

--output-filename

Имя выходного файла сборки

 Имя выходного файла сборки строка [name].js

--output-jsonp-function

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

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

--output-library

Экспонировать экспорт точки входа как библиотеку

 Экспонировать экспорт точки входа как библиотеку строка

--output-library-target

Тип для экспонирования экспорта точки входа как библиотеки

 Тип для экспонирования экспорта точки входа как библиотеки строка var

--output-path

Путь вывода для ресурсов сборки

 Путь вывода для ресурсов сборки строка Текущая директория

--output-pathinfo

Включить комментарий с запросом для каждой зависимости

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

--output-public-path

Публичный путь к ресурсам

 Публичный путь к ресурсам строка /

--output-source-map-filename

Имя выходного файла для SourceMap

 Имя выходного файла для SourceMap строка [name].map или [outputFilename].map

--build-delimiter

Отобразить пользовательский текст после вывода сборки

 Отобразить пользовательский текст после вывода сборки строка Значение по умолчанию null. Вы можете указать строку, такую как === Build done ===

Пример использования

webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js |  2.6 kB | 0 [emitted] | index2        |
| index740fdca26e9348bedbec.bundle.js  | 2.59 kB | 1 [emitted] | index         |
	[0] ./src/others.js 29 bytes {0} {1} [built]
	[1] ./src/index.js 51 bytes {1} [built]
	[2] ./src/index2.js 54 bytes {0} [built]
webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.76 kB | 0 [emitted] | index2        |
|  index740fdca26e9348bedbec.bundle.js | 2.74 kB | 1 [emitted] | index         |
|                        index2123.map | 2.95 kB | 0 [emitted] | index2        |
|                         index123.map | 2.95 kB | 1 [emitted] | index         |
	[0] ./src/others.js 29 bytes {0} {1} [built]
	[1] ./src/index.js 51 bytes {1} [built]
	[2] ./src/index2.js 54 bytes {0} [built]

Параметры отладки

Этот набор параметров позволяет лучше отладить приложение, содержащее ресурсы, скомпилированные с помощью webpack

Параметр Описание Тип ввода Значение по умолчанию

--debug

Переключить загрузчики в режим отладки

 Переключить загрузчики в режим отладки булево false

--devtool

Определить тип карты исходного кода для скомпонованных ресурсов

 Определить тип карты исходного кода для скомпонованных ресурсов строка -

--progress

Отображать прогресс компиляции в процентах

 Отображать прогресс компиляции в процентах булево false

--display-error-details

Отображать подробности об ошибках

 Отображать подробности об ошибках булево false

Параметры модулей

Эти параметры позволяют привязывать модули так, как это разрешено webpack

Параметр Описание Использование

--module-bind

Привязать расширение файла к загрузчику

 Привязать расширение файла к загрузчику --module-bind js=babel-loader

--module-bind-post

Привязать расширение файла к загрузчику после обработки

 Привязать расширение файла к загрузчику после обработки

--module-bind-pre

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

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

Параметры наблюдения

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

Параметр Описание

--watch, -w

Отслеживать изменения в файловой системе

 Отслеживать изменения в файловой системе

--watch-aggregate-timeout

Таймаут для сбора изменений при отслеживании

 Таймаут для сбора изменений при отслеживании

--watch-poll

Интервал опроса для отслеживания (также включает опрос)

 Интервал опроса для отслеживания (также включает опрос)

--watch-stdin, --stdin

Завершить процесс при закрытии стандартного ввода

 Завершить процесс при закрытии стандартного ввода

Параметры оптимизации

Эти параметры позволяют манипулировать оптимизациями для сборки в продакшене с помощью webpack

Параметр Описание Используемый плагин

--optimize-max-chunks

Попытаться удерживать количество фрагментов ниже лимита

 Попытаться удерживать количество фрагментов ниже лимита LimitChunkCountPlugin

--optimize-min-chunk-size

Попытаться удерживать размер фрагмента выше лимита

 Попытаться удерживать размер фрагмента выше лимита MinChunkSizePlugin

--optimize-minimize

Минифицировать JavaScript и переключать загрузчики на минификацию

 Минифицировать JavaScript и переключать загрузчики на минификацию TerserPlugin & LoaderOptionsPlugin

Параметры разрешения

Эти параметры позволяют настроить решатель webpack resolver с псевдонимами и расширениями.

Параметр Описание Пример

--resolve-alias

Настройка псевдонима модуля для разрешения

 Настройка псевдонима модуля для разрешения --resolve-alias jquery-plugin=jquery.plugin

--resolve-extensions

Настройка расширений, которые должны использоваться для разрешения модулей

 Настройка расширений, которые должны использоваться для разрешения модулей --resolve-extensions .es6 .js .ts

--resolve-loader-alias

Минифицировать JavaScript и переключать загрузчики на минификацию

 Минифицировать JavaScript и переключать загрузчики на минификацию

Параметры статистики

Эти параметры позволяют webpack отображать различные статистические данные и форматировать их по-разному в выводе консоли.

Параметр Описание Тип

--color, --colors

Принудительное использование цветов в консоли [по умолчанию: включено только для вывода в терминал]

 Принудительное использование цветов в консоли [по умолчанию: включено только для вывода в терминал] boolean

--no-color, --no-colors

Принудительное отключение цветов в консоли

 Принудительное отключение цветов в консоли boolean

--display

Выбор предустановки отображения статистических данных (verbose, detailed, normal, minimal, errors-only, none; с версии webpack 3.0.0)

 Выбор предустановки отображения статистических данных (verbose, detailed, normal, minimal, errors-only, none; с версии webpack 3.0.0) string

--display-cached

Отображать также кэшированные модули в выводе

 Отображать также кэшированные модули в выводе boolean

--display-cached-assets

Отображать также кэшированные ресурсы в выводе

 Отображать также кэшированные ресурсы в выводе boolean

--display-chunks

Отображать фрагменты в выводе

 Отображать фрагменты в выводе boolean

--display-depth

Отображать расстояние от точки входа для каждого модуля

 Отображать расстояние от точки входа для каждого модуля boolean

--display-entrypoints

Отображать точки входа в выводе

 Отображать точки входа в выводе boolean

--display-error-details

Отображать подробности об ошибках

 Отображать подробности об ошибках boolean

--display-exclude

Исключать модули из вывода

 Исключать модули из вывода boolean

--display-max-modules

Установить максимальное количество отображаемых модулей в выводе

 Установить максимальное количество отображаемых модулей в выводе number

--display-modules

Отображать даже исключенные модули в выводе

 Отображать даже исключенные модули в выводе boolean

--display-optimization-bailout

Триггер отката поднятия области видимости (с версии webpack 3.0.0)

 Триггер отката поднятия области видимости (с версии webpack 3.0.0) boolean

--display-origins

Отображать происхождение фрагментов в выводе

 Отображать происхождение фрагментов в выводе boolean

--display-provided-exports

Отображать информацию об экспортах, предоставляемых модулями

 Отображать информацию об экспортах, предоставляемых модулями boolean

--display-reasons

Отображать причины включения модуля в выводе

 Отображать причины включения модуля в выводе boolean

--display-used-exports

Отображать информацию об используемых экспортах в модулях (удаление по дереву)

 Отображать информацию об используемых экспортах в модулях (удаление по дереву) boolean

--hide-modules

Скрыть информацию о модулях

 Скрыть информацию о модулях boolean

--sort-assets-by

Сортировать список ресурсов по свойству в ресурсе

 Сортировать список ресурсов по свойству в ресурсе string

--sort-chunks-by

Сортировать список фрагментов по свойству в фрагменте

 Сортировать список фрагментов по свойству в фрагменте string

--sort-modules-by

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

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

--verbose

Показать больше деталей

 Показать больше деталей boolean

Дополнительные параметры

Параметр Описание Использование

--bail

Прервать компиляцию при первой ошибке

 Прервать компиляцию при первой ошибке

--cache

Включить кэширование в памяти [Включено по умолчанию для отслеживания]

 Включить кэширование в памяти [Включено по умолчанию для отслеживания] --cache=false

--define

Определить любую свободную переменную, см. shimming

 Определить любую свободную переменную, см. shimming --define process.env.NODE_ENV="'development'"

--hot

Включает горячую замену модулей

 Включает горячую замену модулей --hot=true

--labeled-modules

Включает модули с метками [Использует LabeledModulesPlugin]

 Включает модули с метками [ Использует LabeledModulesPlugin ]

--live-reload

Включает моментальную перезагрузку

 Включает моментальную перезагрузку --live-reload=true

--plugin

Загрузить этот плагин

 Загрузить этот плагин

--prefetch

Предварительно загрузить определенный файл

 Предварительно загрузить определенный файл --prefetch=./files.js

--provide

Предоставить эти модули в качестве глобальных, см. shimming

 Предоставить эти модули в качестве глобальных, см. shimming --provide jQuery=jquery

--records-input-path

Путь к файлу записей (чтение)

 Путь к файлу записей (чтение)

--records-output-path

Путь к файлу записей (запись)

 Путь к файлу записей (запись)

--records-path

Путь к файлу записей

 Путь к файлу записей

--target

Целевая среда выполнения

 Целевая среда выполнения --target='node'

Сокращения

Сокращение Заменяет

-d

--debug --devtool cheap-module-eval-source-map --output-pathinfo

 --debug --devtool cheap-module-eval-source-map --output-pathinfo

-p

--optimize-minimize --define process.env.NODE_ENV="production", см. сборку для производства

 --optimize-minimize --define process.env.NODE_ENV="production" , см. сборку для производства

Профилирование

Опция --profile собирает временную информацию для каждого шага компиляции и включает её в вывод.

webpack --profile

⋮
[0] ./src/index.js 90 bytes {0} [built]
    factory:22ms building:16ms = 38ms

Для каждого модуля в выводе, применимо, отображаются следующие детали:

  • factory: время сбора метаданных модуля (например, разрешение имени файла)
  • building: время построения модуля (например, загрузчики и синтаксический разбор)
  • dependencies: время определения и соединения зависимостей модуля

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

webpack --progress --profile

30ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
10ms hashing
0ms module assets processing
13ms chunk assets processing
1ms additional chunk assets processing
0ms recording
0ms additional asset processing
26ms chunk asset optimization
1ms asset optimization
6ms emitting
⋮

Дополнительное чтение

  • Анализ статистических данных сборки
  • Три простых способа проверки пакета webpack
  • Оптимизация размера пакета вашего приложения с помощью webpack
  • Анализ и оптимизация вашего пакета webpack
  • Анализ и минимизация размера пакета на стороне клиента с помощью webpack и source-map-explorer

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://v4.webpack.js.org/api/cli

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API