Webpack cli что это

Что такое Webpack

Рассказываем, как устроен самый известный бандлер и как настроить базовый проект.

Время чтения: 8 мин

Открыть/закрыть навигацию по статье

Кратко

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

Отслеживание изменений в проекте

Лоадеры
Плагины

Игорь Камышев советует

Контрибьюторы:

Обновлено 30 января 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Webpack — это самый популярный сборщик в мире JS. Его функции легко расширяются с помощью сторонних пакетов, так что Webpack можно заставить делать практически что угодно. А если готового плагина не нашлось, благодаря мощному API можно написать решение под свой уникальный случай.

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

Скопировать ссылку «Базовое использование» Скопировано

На базовом уровне использовать Webpack довольно просто. Представим, что в нашем приложении есть файл application.js с функциями, необходимыми для работы:

 function sayHello()  console.log('Hello!')> function sayBye()  console.log('Bye!')> // Экспортируем эти функции,// чтобы воспользоваться ими в другом месте:export function sayHello()  console.log('Hello!') > function sayBye()  console.log('Bye!') > // Экспортируем эти функции, // чтобы воспользоваться ими в другом месте: export  sayHello, sayBye >

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

 import < sayHello, sayBye >from './application' sayHello()sayBye() import  sayHello, sayBye > from './application' sayHello() sayBye()

Входная точка — файл, с которого начинается исполнение программы. Обычно в нём содержится логика старта приложения.

Настроим Webpack, чтобы он собирал единый файл с кодом приложения.

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

 npm install --dev webpack webpack-cli npm install --dev webpack webpack-cli

webpack — основная зависимость, в которой хранится весь код, нужный для работы бандлера.

webpack — cli — обёртка для запуска Webpack из командной строки, Command Line Interface.

Теперь достаточно создать простой конфигурационный файл webpack.config.js:

 // path — встроенный в Node.js модульconst path = require('path') module.exports =  // Указываем путь до входной точки: entry: './src/index.js', // Описываем, куда следует поместить результат работы: output:  // Путь до директории (важно использовать path.resolve): path: path.resolve(__dirname, 'dist'), // Имя файла со сборкой: filename: 'bundle.js' >> // path — встроенный в Node.js модуль const path = require('path') module.exports =  // Указываем путь до входной точки: entry: './src/index.js', // Описываем, куда следует поместить результат работы: output:  // Путь до директории (важно использовать path.resolve): path: path.resolve(__dirname, 'dist'), // Имя файла со сборкой: filename: 'bundle.js' > >

Почти готово, осталось только добавить скрипт для сборки в package.json и вызвать его:

  "scripts":  "build": "webpack" >>  "scripts":  "build": "webpack" > >

 npm run build npm run build

После выполнения в директории dist окажется файл bundle.js, который уже можно подключать на страницу в браузере.

В корне проекта нужно создать папку src, а в ней файл index.html и подключить в него файл со сборкой:

     .   .    DOCTYPE html> html> head> . head> body> . script src="./dist/bundle.js"> script> body> html>

Если открыть этот файл в браузере, то в консоли появится приветствие и прощание.

В консоли появляется приветствие и прощание.

Отслеживание изменений в проекте

Скопировать ссылку «Отслеживание изменений в проекте» Скопировано

Заново запускать сборку после внесения каждой правки не очень удобно. Во-первых, придётся каждый раз писать команду в терминале. Во-вторых, полная сборка больших проектов может занимать десятки минут, и тратить столько времени каждый раз просто расточительно.

Для решения этой проблемы можно воспользоваться режимом инкрементальной сборки, когда Webpack отслеживает изменения файлов с исходным кодом и автоматически собирает те части, которые изменились.

Добавим новую команду в package.json:

  "scripts":  "build": "webpack", "watch": "webpack --watch" >>  "scripts":  "build": "webpack", "watch": "webpack --watch" > >

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

Для большего удобства можно воспользоваться пакетом webpack-dev-server.

Расширение

Скопировать ссылку «Расширение» Скопировано

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

Webpack начинает свою работу со входной точки — первого JS-файла. В нём он находит все импорты, по которым собирает файлы с исходным кодом проекта. Во всех найденных файлах снова ищет импорты, и так далее, пока импорты не закончатся. В итоге у Webpack оказывается список всех файлов проекта и информация, как эти файлы связаны. Затем в дело вступают плагины и лоадеры. Для каждого файла Webpack найдёт все подходящие по конфигурации лоадеры и обработает ими файл.

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

Обратная сторона расширяемости Webpack — сложность его конфигурации. В больших проектах файл с настройками сборки может занимать тысячи строк. Часто такую конфигурацию разбивают на несколько файлов, чтобы её было проще читать.

Лоадеры

Скопировать ссылку «Лоадеры» Скопировано

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

Например, ts — loader превратит любой TypeScript-код в обыкновенный JavaScript-код.

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

style — loader — импортирует CSS-файлы и внедряет стили в DOM.
css — loader — позволяет работать с @import и url ( ) внутри CSS.
babel — loader — позволяет писать код на современном JS, но исполнять его даже в старых браузерах.

Чтобы добавить новый лоадер, нужно расширить файл webpack.config.js:

 module.exports =  // В этом массиве будут перечислены все применяемые лоадеры: module:  rules: [  // Это правило будет применяться ко всем файлам, // имя которых подойдет под регулярное выражение: test: /\.css$/, // Список лоадеров, которые применятся к файлу: use: [ < loader: 'style-loader' >,  loader: 'css-loader', // Лоадеру можно передать параметры: options: > ] > ] >> module.exports =  // В этом массиве будут перечислены все применяемые лоадеры: module:  rules: [  // Это правило будет применяться ко всем файлам, // имя которых подойдет под регулярное выражение: test: /\.css$/, // Список лоадеров, которые применятся к файлу: use: [  loader: 'style-loader' >,  loader: 'css-loader', // Лоадеру можно передать параметры: options:  modules: true > > ] > ] > >

Плагины

Скопировать ссылку «Плагины» Скопировано

Плагин — мощный способ расширить или изменить функциональность Webpack. Если лоадер ограничен только одной функцией (принимает содержимое файла и должен вернуть изменённое содержимое), то плагин может делать всё что угодно.

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

MiniCssExtract Plugin — по умолчанию все стили, которые обработал Webpack, попадают в JS-файл и потом вставляются в тег . Этот плагин извлекает все стили в отдельный CSS-файл, который можно подключить к странице через тег .
HotModuleReplacement Plugin — позволяет делать изменения в коде и видеть изменения в браузере без полной перезагрузки страницы, это делает разработку более комфортной.
CompressionWebpack Plugin — сжимает все ресурсы, сгенерированные Webpack, чтобы передавать пользователям по сети меньший объём данных.

Чтобы добавить новый плагин в сборку, нужно расширить файл webpack.config.js:

 // Webpack предоставляет несколько плагинов в основном пакете:const < ProgressPlugin >= require('webpack') module.exports =  plugins: [ // При сборке этот плагин будет отображать прогресс в консоли: new ProgressPlugin() ]> // Webpack предоставляет несколько плагинов в основном пакете: const  ProgressPlugin > = require('webpack') module.exports =  plugins: [ // При сборке этот плагин будет отображать прогресс в консоли: new ProgressPlugin() ] >

На практике

Скопировать ссылку «На практике» Скопировано

Игорь Камышев советует

Скопировать ссылку «Игорь Камышев советует» Скопировано

�� На практике не очень удобно вручную создавать HTML-файлы и подключать туда сборки, сгенерированные Webpack — ведь количество и имена файлов могут меняться в зависимости от сборки. Для автоматизации часто используют HtmlWebpackPlugin.

В первую очередь, нужно установить пакет с плагином в проект:

 npm install --save-dev html-webpack-plugin npm install --save-dev html-webpack-plugin

 const < HtmlWebpackPlugin >= require('html-webpack-plugin') module.exports =  plugins: [new HtmlWebpackPlugin()]> const  HtmlWebpackPlugin > = require('html-webpack-plugin') module.exports =  plugins: [new HtmlWebpackPlugin()] >

При сборке плагин сгенерирует пустой index.html в папку с собранным проектом и добавит туда ссылки на финальные JS- и CSS-файлы. При необходимости плагин можно кастомизировать.

�� path — это встроенный в Node.js модуль для работы с путями. Чтобы не беспокоиться об особенностях разных операционных систем, лучше всегда при работе с путями в файловой системе использовать модуль path.

Например, в разных операционных системах используется разный разделитель путей — косая черта / или обратная косая черта \ .

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

path . resolve — функция, которая принимает любое число сегментов пути и возвращает абсолютный путь. Работает так:

 path.resolve('/foo/bar', './baz')// '/foo/bar/baz'path.resolve('/foo/bar', '/tmp/file/')// '/tmp/file' // Если текущая рабочая директория /home/user:path.resolve('www', 'static_files/png', '../gif/image.gif')// '/home/user/www/static_files/gif/image.gif' path.resolve('/foo/bar', './baz') // '/foo/bar/baz' path.resolve('/foo/bar', '/tmp/file/') // '/tmp/file' // Если текущая рабочая директория /home/user: path.resolve('www', 'static_files/png', '../gif/image.gif') // '/home/user/www/static_files/gif/image.gif'

path . sep — строка разделителя путей в текущем окружении ( / или \ ).
path . extname — функция, которая принимает строку с именем файла и возвращает расширение этого файла.

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

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

Прочтите installation guide , если у вас еще не установлены webpack и CLI.

warning

Для webpack-cli v5.0.0+ требуется узел >= v14.15.0, webpack >= v5.0.0 и webpack-dev-server >= v4.0.0 .

warning

Если вы хотите запустить webpack с использованием npx , убедитесь, что у вас установлен webpack-cli .

Commands

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

Command	Usage	Description
build	build\|bundle\|b [entries. ] [options]	Запустите webpack (команда по умолчанию, может быть omitted).
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 и следите за изменениями файлов.

Build

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

npx webpack build [options]

example

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

Init

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

npx webpack init [generation-path] [options]

example

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

Generation Path

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

Options

-t , —template

Имя шаблона для создания.

-f , —force

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

tip

Loader

npx webpack loader [output-path] [options]

example

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

Output Path

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

Options

-t , —template

Plugin

npx webpack plugin [output-path] [options]

example

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

Output Path

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

Options

-t , —template

Info

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

npx webpack info [options]

example

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

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

-a , —additional-package

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

example

npx webpack info --additional-package postcss

-o , —output

string : ‘json’ | ‘markdown’

Чтобы получить вывод в указанном формате.

example

npx webpack info --output markdown

Configtest

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

npx webpack configtest [config-path]

example

npx webpack configtest ./webpack.config.js

Config Path

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

Serve

Запустите сервер разработки webpack.

npx webpack serve [options]

example

npx webpack serve --static --open

tip

Watch

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

npx webpack watch [options]

example

npx webpack watch --mode development

Flags

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

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

Negated Flags

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

Core Flags

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

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

Например, если вы хотите включить подсказки по производительности в своем проекте, вы должны использовать параметр this в конфигурации с основными флагами, которые вы можете сделать —

npx webpack --performance-hints warning

Usage

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

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

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

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

npx webpack —entry —output-path

example

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

entry

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

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

warning

Опция —entry-reset необходима для замены существующей опции entry , без нее опция —entry добавит еще одну запись к существующим записям.

tip

Используйте синтаксис webpack [command] —entry-reset [entries. ] [option] , поскольку некоторые параметры могут принимать несколько значений, поэтому webpack —target node ./entry.js означает target: [‘node’, ‘./entry.js’] .

output-path

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

Example

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

. ├── 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/

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

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

Default Configurations

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

Это приоритет поиска в порядке возрастания

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

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

Common Options

warning

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

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

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

Укажите другой файл configuration , отличный от 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

json

Распечатать результат webpack как JSON

npx webpack --json

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

npx webpack --json stats.json

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

tip

См. stats data api , чтобы узнать больше о сгенерированной статистике здесь.

Environment Options

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

env

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

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

Invocation	Resulting environment
npx webpack —env prod
npx webpack —env prod —env min
npx webpack —env platform=app —env production
npx webpack —env foo=bar=app
npx webpack —env app.platform=»staging» —env app.name=»test»

tip

Если вы хотите явно установить переменную в пустую строку ( «» ), вам может потребоваться экранировать символы на терминале, например npx webpack —env foo=\»\» .

tip

Дополнительные сведения об использовании см. в руководстве environment variables .

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

Environment Variable	Description
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

Для webpack-cli v4 .

Вы можете использовать опцию —node-env для установки process.env.NODE_ENV :

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

tip

Параметр mode будет учитывать параметр —node-env , если вы не установите его явно, i.e. —node-env production установит для process.env.NODE_ENV и mode значение ‘production’ .

define-process-env-node-env

Для webpack-cli v5+ .

Вы можете использовать опцию —define-process-env-node-env для установки process.env.NODE_ENV :

npx webpack --define-process-env-node-env production # process.env.NODE_ENV = "производство"

tip

Параметр mode будет учитывать параметр —define-process-env-node-env , если вы не установите его явно, i.e. —define-process-env-node-env production установит для process.env.NODE_ENV и mode значение ‘production’ .

Configuration Options

Parameter	Explanation	Input type	Default
—config	Путь к файлу конфигурации	string[]	Default Configs
—config-name	Имя используемой конфигурации	string[]	—
—env	Среда передается в конфигурацию, когда она является функцией	string[]	—

Analyzing Bundle

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

npx webpack --analyze

warning

Убедитесь, что в вашем проекте установлен webpack-bundle-analyzer , иначе CLI предложит вам установить его.

Progress

Чтобы проверить ход любой компиляции webpack, вы можете использовать флаг —progress .

npx webpack --progress

Чтобы собрать данные профиля для шагов выполнения, вы можете передать profile в качестве значения флагу —progress .

npx webpack --progress=profile

Передать аргументы CLI в 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

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

Exit Code	Description
0	Success
1	Ошибки из webpack
2	Проблема Configuration/options или внутренняя ошибка

CLI Переменные среды

Environment Variable	Description
WEBPACK_CLI_SKIP_IMPORT_LOCAL	когда true , он пропустит использование локального экземпляра webpack-cli .
WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG	когда true принудительно загрузит конфигурацию ESM.
WEBPACK_PACKAGE	Используйте пользовательскую версию webpack в CLI..
WEBPACK_DEV_SERVER_PACKAGE	Используйте пользовательскую версию webpack-dev-server в CLI..
WEBPACK_CLI_HELP_WIDTH	Используйте пользовательскую ширину для вывода справки.

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

WEBPACK_PACKAGE

Используйте пользовательскую версию webpack в CLI., учитывая следующее содержимое в вашем 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

Troubleshooting

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

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

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

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

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

Дополнительные сведения см. в нашей документации по writing a webpack configuration in TypeScript .

Работа с Webpack #

Самый простой способ изменять конфигурацию webpack — использовать объект в опции configureWebpack в файле vue.config.js :

// vue.config.js module.exports =  configureWebpack:  plugins: [ new MyAwesomeWebpackPlugin() ] > >

Объект будет объединён в итоговую конфигурацию webpack с помощью webpack-merge.

Некоторые параметры webpack устанавливаются на основе значений из vue.config.js и не должны изменяться напрямую. Например, вместо изменения output.path нужно использовать опцию outputDir в vue.config.js ; а вместо output.publicPath нужно использовать опцию publicPath в vue.config.js . Это связано с тем, что значения из vue.config.js используются в нескольких местах внутри конфигурации и необходимо гарантировать что всё вместе будет работать правильно.

Если необходимо условное поведение, в зависимости от окружения, или вы хотите напрямую изменять конфигурацию — используйте функцию (будет лениво выполняться после установки переменных окружения). Она получает итоговую конфигурацию в качестве аргумента. Внутри функции можно напрямую изменить конфигурацию, ИЛИ вернуть объект для объединения:

// vue.config.js module.exports =  configureWebpack: config =>  if (process.env.NODE_ENV === 'production')  // изменение конфигурации для production. > else  // изменения для разработки. > > >

Chaining (Продвинутый вариант) #

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

Это позволяет осуществлять более тонкий контроль над встроенной конфигурацией. Ниже вы увидите примеры изменений, выполненных с помощью опции chainWebpack в vue.config.js .

Команда vue inspect пригодится, когда вы будете пробовать добраться до определённого загрузчика в цепочке.

Изменение настроек загрузчика #

// vue.config.js module.exports =  chainWebpack: config =>  config.module .rule('vue') .use('vue-loader') .tap(options =>  // изменение настроек. return options >) > >

Для загрузчиков связанных с CSS, рекомендуется использовать css.loaderOptions вместо изменения напрямую через chaining. Это связано с тем, что для каждого типа CSS-файлов существуют несколько правил, а css.loaderOptions гарантирует, что вы сможете повлиять на все эти правила в одном месте.

Добавление нового загрузчика #

// vue.config.js module.exports =  chainWebpack: config =>  // Загрузчик GraphQL config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() // Добавление ещё одного загрузчика .use('other-loader') .loader('other-loader') .end() > >

Замена загрузчиков для правила #

Если вы хотите заменить существующий базовый загрузчик, например воспользоваться vue-svg-loader для вставки SVG-файлов инлайн вместо загрузки обычными файлами:

// vue.config.js module.exports =  chainWebpack: config =>  const svgRule = config.module.rule('svg') // очищаем все существующие загрузчики. // если вы этого не сделаете, загрузчик ниже будет добавлен // к уже существующим загрузчикам для этого правила. svgRule.uses.clear() // добавляем загрузчик для замены svgRule .use('vue-svg-loader') .loader('vue-svg-loader') > >

Изменение настроек плагина #

// vue.config.js module.exports =  chainWebpack: config =>  config .plugin('html') .tap(args =>  return [/* новые args для передачи в конструктор html-webpack-plugin */] >) > >

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

Например, предположим, необходимо изменить местоположение index.html по умолчанию с /Users/test/proj/public/index.html на /Users/test/proj/app/templates/index.html . По ссылке html-webpack-plugin перечислен список параметров, которые можем передавать. Чтобы изменить шаблон, передадим новый путь к шаблону следующей конфигурацией:

// vue.config.js module.exports =  chainWebpack: config =>  config .plugin('html') .tap(args =>  args[0].template = '/Users/test/proj/app/templates/index.html' return args >) > >

Вы можете убедиться, что изменение произошло, изучив конфигурацию webpack с помощью команды vue inspect , о которой мы поговорим дальше.

Просмотр конфигурации Webpack проекта #

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

vue-cli-service предоставляет команду inspect для проверки итоговой конфигурации webpack. Глобальный бинарник vue также предоставляет команду inspect , которая просто проксируется в vue-cli-service inspect вашего проекта.

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

Вы можете перенаправить вывод в файл для более удобного изучения:

vue inspect > output.js

По умолчанию команда inspect показывает конфигурацию для разработки. Для отображения конфигурации для production необходимо запустить:

vue inspect --mode production > output.prod.js

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

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

# показать только первое правило vue inspect module.rules.0

Или указать именованное правило или плагин:

vue inspect --rule vue vue inspect --plugin html

Наконец, вы можете вывести все именованные правила и плагины:

vue inspect --rules vue inspect --plugins

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

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

/node_modules/@vue/cli-service/webpack.config.js

Этот файл динамически разрешается и экспортирует ту же конфигурацию webpack, которая используется в командах vue-cli-service , в том числе из плагинов и даже ваших пользовательских конфигураций.

Webpack

Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Также работает с TypeScript, CoffeeScript, его можно использовать совместно с Node.js. Webpack реализован как программа, которая при запуске обрабатывает модули, строит между ними граф зависимостей, а потом на основе графа генерирует единый файл.

Освойте профессию «Frontend-разработчик»

Кто пользуется Webpack

Frontend-разработчики, которые используют в работе JavaScript и его фреймворки.
Backend-разработчики, пишущие серверную часть сайта или веб-приложения с помощью Node.js.
Программисты на TypeScript и CoffeeScript — языках на базе JS, которые применяются во фронтенде и иногда в бэкенде.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Group 1321314347 (1)

Для чего нужен Webpack

для быстрого объединения множества JavaScript-файлов в один большой;
более легкого подключения кода JS к HTML-странице;
транспиляции, или перевода кода на TypeScript или CoffeeScript на «чистый» JavaScript;
подготовки файлов к размещению на сервере для их оптимизации;
адаптации кода к старым версиям браузера;
тестирования написанного кода с помощью локального сервера, где запускается собранный проект;
разнообразных преобразований кода и выполнения дополнительных действий.

Понятия Webpack

Entry. Точка входа — файл, с которого сборщик начинает объединять модули. Обычно это основной JS-файл проекта, и от него зависят все остальные.

Output. Точка выхода — файл, в который запишется собранный проект. При настройке Webpack в качестве точки выхода указывают путь к конечному файлу.

Bundle. Бандл — собранный из модулей большой файл, результат работы сборщика.

Loaders. Они же лоадеры, или загрузчики — дополнительные сущности, которые расширяют возможности Webpack по преобразованию. По умолчанию сборщик распознает только файлы JS и JSON. С помощью лоадеров можно «научить» его понимать и другие файлы, от таблиц стилей CSS до изображений. Загрузчики скачиваются отдельно.

Plugins. Плагины — второй вид дополнительных сущностей. Это надстройки для решения дополнительных задач, например автоматического создания HTML-файла, к которому подключается бандл. Они тоже скачиваются отдельно.

Режимы. Режимы работы — наборы настроек для разных задач.

Режим production — для финальной сборки перед загрузкой на сервер. Предусматривает максимальную оптимизацию и сжатие кода.
Режим development — для тестовых сборок, которые нужны при разработке. Упор делается не на оптимизацию, а на читаемость. Можно скачать дополнительный модуль webpack-dev-server и запустить локальный сервер для тестирования проекта. С ним проект будет пересобираться при каждом изменении кода, и эти изменения будут применяться в реальном времени.
Режим none не предусматривает оптимизации и отключает ее настройки.

По умолчанию Webpack работает в режиме none.

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

Как работает сборщик

Перед началом работы программист создает в папке проекта файл webpack.config.js. Он нужен для его настройки. Чтобы файл заработал, сборщик уже должен быть установлен.
В файле разработчик прописывает настройки сборщика для проекта. Он указывает точку входа и выхода, лоадеры и плагины, которые нужно применить при сборке. Там же можно установить режим работы — production или development.
В настройках менеджера пакетов npm разработчик указывает условия для запуска Webpack. Теперь при выполнении определенной команды запустится сборщик.
При запуске Webpack использует файл конфигурации webpack.config.js, где пользователь ранее указал настройки. Он находит файлы, связанные с точкой входа, строит граф их зависимостей, а потом собирает все в единый бандл на основе графа. Так бандл получается корректным, и все в нем подключается в правильном порядке.

Как начать работу с Webpack

Webpack можно скачать бесплатно из официального репозитория на GitHub либо установить с помощью менеджеров пакетов npm или Yarn. Инструмент может быть установлен глобально либо локально для каждого проекта.

Глобальная установка

npm i -g webpack webpack-cli

yarn global add webpack webpack-cli

Теперь можно запустить Webpack:

Локальная установка

yarn add webpack webpack-cli -D

npm i webpack webpack-cli —save-dev

После этого нужно добавить строки в package.json файл:

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

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

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

картинка (70)

Статьи по теме: