Модули

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

Каждый модуль имеет меньшую область видимости, чем полная программа, что делает проверку, отладку и тестирование тривиальными. Хорошо написанные модули обеспечивают надёжные абстракции и границы инкапсуляции, поэтому каждый модуль имеет согласованный дизайн и чёткую цель в рамках всей программы.

Node.js поддерживает модульное программирование почти с самого начала. Однако поддержка модулей в веб-разработке была медленной. Существует множество инструментов, которые поддерживают модульный JavaScript в браузере, с различными преимуществами и ограничениями. Webpack использует опыт, полученный от этих систем, и применяет концепцию модулей ко всем файлам вашего проекта.

Что такое модуль webpack

В отличие от модулей Node.js, webpack модули могут выражать свои зависимости различными способами. Вот несколько примеров:

• Оператор ES2015 import
• Оператор CommonJS require()
• Оператор AMD define и require
• Оператор @import внутри файла css/sass/less.
• Ссылка на изображение в таблице стилей url(...) или HTML <img src=...> файле.

Поддерживаемые типы модулей

Webpack нативно поддерживает следующие типы модулей:

• Модули ECMAScript
• Модули CommonJS
• Модули AMD
• Ассеты
• Модули WebAssembly

Помимо этого, webpack поддерживает модули, написанные на различных языках и препроцессорах, через загрузчики. Загрузчики описывают webpack, как обрабатывать нестандартные модули и включать эти зависимости в ваши пакеты. Сообщество webpack создало загрузчики для широкого круга популярных языков и процессоров, включая:

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus
• Elm

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

Полный список см. в списке загрузчиков или создайте свой собственный.