Сборщик модулей Webpack

Webpack — это статический сборщик модулей JavaScript в единый JS-файл (инструмент, позволяющий скомпилировать несколько модулей в один файл), содержащий все необходимое для запуска приложения.

Webpack применяют как при frontend, так и в backend разработке на Node.js. Он анализирует модули приложения, создает на основе операторов import и/или require() граф зависимостей модулей и собирает модули в правильном порядке в один или более бандл (bundle, узел), на который может ссылаться файл «index.html».

Официальный сайт проекта: https://webpack.js.org/

Для работы сборщика webpack необходимо установить (возможны другие варианты используемых программ):

  1. платформу Node.JS (https://nodejs.org) - подробнее читай Node.js как среда выполнения JS;
  2. терминал Git Bash (приложение для сред Microsoft Windows, которое предоставляет эмуляцию bash (командной оболочки), используемую для запуска Git из командной строки) (https://git-scm.com/) - подробнее читай Git Bash в VS Code.
  3. создать директорию src для хранения файлов приложения:
    • src/app для файлов JavaScript;
    • src/public для ресурсов проекта и статических файлов;
    • src/style для глобальных стилей проекта;
  4. инициализировать проект в среде Node.JS через терминал Git Bash командой npm init (в корне проекта);
  5. установить webpack (см. ниже);
  6. проверить настройки в разделах файла package.json (раздел "scripts" должен содержать строку (как минимум) со свойством { "build": "webpack" });
  7. создать в корне проекта конфигурационный файл webpack.config.js (является вспомогательным инструментом сборщика webpack, в основное приложение включен не будет):
    • вручную или
    • командой npx webpack-cli init (быстрая генерация файла конфигурации webpack.config.js для вашего проекта, задаст несколько вопросов перед созданием файла конфигурации), при необходимости откорректировать;
  8. запустить webpack из командной строки командой npm run build (команда build имеет вариации в зависимости от настроек, указанных в разделе "scripts" файла package.json;
  9. после работы сборщика проверить создание результирующей директории и выходного файла по указанному в webpack.config.js пути.

Установка Webpack

Перед установкой webpack необходимо для инициализации проекта и создания файла package.json, определяющего настройки проекта (зависимости, скрипты, название и т.д.), запустить npm в корневой папке проекта командой npm init:

  • npm init -y  (флаг -y - настройки по умолчанию, для быстрой инициализации).

Webpack может быть установлен с помощью npm (node package manager) в рабочую папку в составе двух пакетов (webpack и webpack-cli):

  • глобально, командой npm i -g webpack webpack-cli ;
  • локально для каждого проекта (рекомендуется), командой npm i webpack webpack-cli --save-dev.

webpack - собственно сборщик модулей и ресурсов (функционал сборщика);

webpack-cli - интерфейс командной строки (отвечает за доступ к webpack через команды консоли (терминала).

Посмотреть версию установленного webpack можно с помощью команд:

npm list webpack

webpack --version (или webpack -v)

Подробнее о флагах при установке (--save-dev и др.)

Подробнее по флагам https://docs.npmjs.com/cli/v7/commands/npm-install

Указанные флаги при установке пакета влияют на раздел файла package.json, в который пропишутся его имя и версия:

  • -S или, --save, пакет будет отображается в разделе dependencies:{};
  • -P, --save-prod: сохранит в "dependencies": { }. Это код для продакшена, он будет включен в конечный продукт. Добавляйте сюда только те библиотеки, которые будут использованы при работе вашего конечного продукта (вэб-страницы, например).
  • -D, --save-dev: сохранит пакет в "devDependencies": { }. Это пакеты, которые вы используете в процессе девелопмента, препроцессоры LESS, SASS, валидаторы кода, JShint Slint, препроцессоры JS: Babel. Эти пакеты не будут включены в конечный продукт.
  • -O, --save-optional: пакет будет добавлен в "optionalDependencies": { }. Эти пакеты могут быть использованы в работе, но если они будут недоступны или произойдет ошибка при их установке, то npm просто пропустит их и продолжит работу.
  • --no-save: запрещает сохранять пакет в package.json.

Дополнительные флаги:

  • -E, --save-exact: сохранит версию пакета точно, как указано.
  • -B, --save-bundle: сохранит пакет в "bundleDependencies": { }.

[свернуть]
Пример простейшего файла package.json

До установки webpack:

После установки webpack с флагом -D:

[свернуть]

Начальная настройка сборщика webpack

Подробнее на https://webpack.js.org

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

Если по какой-то причине вы хотите использовать другой файл конфигурации, то вы можете указать его через строку файла package.json с помощью флага --config:

[свернуть]

Начальная настройка сборщика webpack осуществляется через конфигурационный файл webpack.config.js (созданный вручную или с помощью webpack-cli) в корневой директории проекта, в котором необходимо определить свойства в разделах:

  1. entry – точку входа, начальный файл, который webpack будет использовать для построения внутреннего графа зависимостей модулей и библиотек (все параметры по ссылке https://webpack.js.org/configuration/entry-context/);
  2. output – вывод указывает путь, по которому webpack должен размещать сборку созданных бандлов (узлов или пакетов) и как он будет называть эти файлы (по умолчанию этот путь ./dist) (все параметры по ссылке https://webpack.js.org/configuration/output/);
  3. module – загрузчики (лоадеры), позволяют webpack обрабатывать не только файлы JavaScript, но и трансформировать другие типы файлов в модули, которые затем можно добавить в граф зависимостей приложения (а значит, и в бандл);
  4. plugins – плагины (используются для выполнения широкого круга задач).
Пример webpack.config.js, созданного вручную

Минимально файл может иметь вид:

[свернуть]
Пример webpack.config.js, созданного с помощью webpack-cli

[свернуть]
Замечание по использованию модуля path

Подробнее о модуле path https://nodejs.org

Модуль path предоставляет методы для работы с путями к файлам и каталогам. Доступ к нему можно получить, подключив его с помощью строки:

const path = require('path');

Метод path.resolve () преобразует последовательность путей или сегментов пути в абсолютный путь, например:

__dirname в качестве аргумента в любом случае является абсолютным путем.

path.resolve() всегда будет приводить к абсолютному URL и будет использовать рабочий каталог в качестве основы для разрешения этого пути. 

Метод path.join () объединяет все заданные сегменты пути вместе с помощью разделителя, зависящего от платформы, в качестве разделителя, а затем нормализует полученный путь как относительный:

Различия в обработке сегментов, начинающихся с / :

  • join() просто объединит его с предыдущим аргументом;
  • resolve() будет рассматривать его как корневой каталог и игнорировать все предыдущие пути.

[свернуть]

Запуск webpack

Режимы webpack

webpack имеет следующие режимы:

  • development (режим разработки);
  • production (по умолчанию).

Режим development:

  • качество оптимизации итогового файла хуже, чем в production;
  • работает быстрее;
  • не удаляет комментарии;
  • предоставляет более подробные сообщения об ошибках и способы их решения;
  • облегчает отладку приложения.

Режим production:

  • работает медленнее, чем development;
  • создает более оптимизированный бандл (файл меньше по размеру).

[свернуть]

Если webpack установлен глобально, его можно вручную запустить из командной строки. 

Если файл  package.json содержит раздел "scripts" следующего наполнения:

то запустить webpack в соответствующем режиме можно из командной строки командами:

  • npm run build
  • npm run build:dev
  • npm run build:prod.

Если указанного раздела нет, то его можно создать вручную.

Просмотр изменений бандла

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

Пример

[свернуть]

Запуск осуществляется в командной строке командой:

npm run watch

Бандл изменяется только в том случае, если в сборке нет ошибок. Если же ошибки присутствуют, watch покажет их и продолжит следить за изменениями.

Генерация Source Maps (для просмотра исходного кода сгенерированных файлов)

Подробнее...

Транспилированный webpack код JavaScript становится трудночитаемым и затрудняет поиск и исправление ошибок.

Source Map - это JSON-файл, который содержит информацию о том, как транспилировать код обратно в исходный код.

Source Maps можно сгенерировать, используя свойство конфигурации devtool в файле webpack.config.js, например:

devtool имеет множество возможных значений, из которых наиболее часто используются:

  • none - не добавляет Source Maps;
  • source-map - для режима production, предоставляет отдельную Source Map, которую можно свернуть и добавляет ссылку в бандл;
  • inline-source-map - для режима development, встраивает Source Maps в качестве data:URL.

Добавить комментарий

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