Загрузчики и плагины в webpack

Загрузчики (loaders) в webpack

Подробнее https://webpack.js.org/concepts/#loaders

По умолчанию webpack понимает только файлы JavaScript и JSON. Загрузчики (loaders) позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые модули, которые могут быть использованы вашим приложением и добавлены в граф зависимостей.

Одной из особенностей webpack является возможность использования import любого типа модуля, например, файлов  .css , которые могут не поддерживаться другими сборщиками или программами.

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

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

Список всех загрузчиков https://webpack.js.org/loaders/.

Для использования загрузчиков webpack необходимо:

  1. установить необходимые загрузчики (например, npm install --save-dev css-loader ts-loader);
  2. выполнить начальные настройки в конфигурационном файле webpack.config.js сборщика webpack.

Начальная настройка осуществляется в разделе module.rules конфигурационного файла webpack.config.js сборщика webpack:

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

Замечания

  1. Важно помнить, что при определении правил в конфигурации вашего веб-пакета вы определяете их в разделе module.rules, а не в rules.
  2. Имейте в виду, что при использовании регулярного выражения для сопоставления файлов вы не можете его цитировать:
    • /\.txt$/ инструктирует webpack сопоставлять любой файл, который заканчивается на .txt;
    • '/\.txt$/' или "/\.txt$/" инструктирует webpack сопоставлять одиночный файл с абсолютным путем '.txt'; это, скорее всего, не ваше намерение.

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

[свернуть]

Отличие загрузчиков от плагинов webpack:

  • загрузчики по сравнению с плагинами довольно просты, т.к. выполняют только одну единственную функцию для webpack и не могут влиять на фактический процесс сборки;
  • плагины могут глубоко интегрироваться в webpack  и получать доступ (и изменять) компилятор (то, как он работает, а также влиять на результат компиляции); они более мощные, но более трудные для поддержки.

Рисунок для понимания https://overcoder.net

Плагины webpack

Опция (раздел) plugins файла конфигурации webpack.config.js используется для настройки процесса сборки веб-пакета различными способами.

Webpack поставляется с множеством встроенных плагинов, доступных как webpack.[plugin-name].

Список встроенных плагинов доступен на странице https://webpack.js.org/plugins/.

Список дополнительных сторонних плагинов можно найти в awesome-webpack.

Пример раздела plugins:

Некоторые полезные плагины webpack:

HTMLWebpackPlugin (создание HTML-файла с уже подключенными скриптами)

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

HtmlWebpackPlugin сгенерирует для вас файл HTML5, который включает в себя все входящие в проект скрипты. Это особенно полезно для веб-пакетов, которые включают в себя хэш в имени js-файла, который изменяется каждую компиляцию.

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

Установка HtmlWebpackPlugin:

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

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

Это сгенерирует файл dist/index.html, содержащий следующее:

Если у вас есть несколько точек входа в веб-пакет, все они будут включены с тегами <script> в сгенерированный HTML.

[свернуть]
CleanWebpackPlugin (очистка каталога output.path после каждой успешной перестройки

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

CleanWebpackPlugin по умолчанию удаляет все файлы внутри каталога output.path webpack, а также все неиспользуемые ресурсы webpack после каждой успешной перестройки. Имеет ряд опций.

Установка CleanWebpackPlugin:

npm install --save-dev clean-webpack-plugin

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

При каждом успешном запуске webpack будет очищать директорию dist от предыдущих версий файлов.

[свернуть]

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

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