Webpack - это статический модульный сборщик для приложений на JavaScript.
Официальный сайт проекта: https://webpack.js.org/
Чем полезен вебпак
Приложения, написанные на JavaScript, постоянно усложняются, поэтому хорошим выходом является использование сборщика (или бандлера). Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. Можно использовать не только сторонние библиотеки, но и собственные файлы. Подобная модульная система позволяет добиться лучшей организации проекта, так как получается, что он разбит на небольшие модули.
Вебпак на данный момент является одним из самых мощных подобных инструментов. Он имеет открытый исходный код и позволяет решать множество разных задач.
Как и другие инструменты разработчика, вебпак имеет свои плюсы и минусы.
Начнем с плюсов: он отлично подходит для работы с одностраничными приложениями. Также вебпак может осуществлять продвинутое разделение кода. Из-за этих и других плюсов сейчас он является одним из наиболее популярных инструментов JS-разработки.
Минусы: вначале немного сложно разобраться в его работе, часть документации устарела из-за большого количества изменений.
Установка
Вебпак можно установить при помощи менеджера пакетов, например npm.
npm install --save-dev webpack
Базовые понятия
Вебпак - это очень гибкий в настройке инструмент. Для того, чтобы начать работать с ним, необходимо познакомиться с четырьмя базовыми понятиями.
1. Entry - вход
2. Output - вывод
3. Loaders - загрузчики
4. Plugins - плагины
Entry
Под Entry (вход) подразумевается точка входа (entry point), которую вебпак будет использовать для построения внутреннего графа зависимостей. После ввода точки входа вебпак сможет понять, какие модули и библиотеки напрямую и не напрямую связываются.
В результате каждая зависимость превращается в файлы, которые называются бандлами (bundles - можно перевести как пакеты или узлы).
Пример простейшей конфигурации entry:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};Output
Output (вывод) указывает, где вебпак должен размещать сборку созданных бандлов, и как он будет называть эти файлы (по умолчанию это ./dist). Настроить эту часть процесса можно в поле output в конфигурации:
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};В этом примере output.filename отвечает за имя файла, а output.path - за место, директорию, где будет находиться сборка.
Loaders
Загрузчики (лоадеры) позволяют вебпаку обрабатывать не только файлы JavaScript, т.к. сам по себе вебпак понимает только JS.
Загрузчики трансформируют все типы файлов в модули, которые затем можно добавить в граф зависимостей вашего приложения (а значит, и в бандл).
Использование загрузчиков имеет две цели:
- Свойство test определяет, какой файл/ файлы должны быть трансформированы.
- Свойство use указывает, какой загрузчик должен использоваться для выполнения трансформации.
Пример конфигурации:
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;Здесь определяются правила (rules) для определенного модуля и используются свойства test и use. Компилятор вебпака поймет, что когда он дойдет до файла «.txt» в require()/import, перед добавлением в бандл ему нужно будет использовать загрузчик raw-loader.
Список популярных загрузчиков можно найти здесь.
Plugins
Если загрузчики используются для трансформации определенных типов модулей, то плагины могут быть использованы для выполнения гораздо более широкого списка задач.
Для того, чтобы использовать плагин, необходимо использовать require() и добавить его в массив плагинов. Большинство плагинов можно кастомизировать через настройки. Так как один плагин может использоваться несколько раз для разных целей, необходимо создать несколько отдельных экземпляров, использовав оператор new.
Много плагинов поставляются сразу с вебпаком из коробки, список можно найти здесь.
Заключение
Вебпак - это полезный гибко настраиваемый инструмент для разработки. Он постоянно дорабатывается и улучшается, актуальная сейчас версия v4.2.0, все релизы можно найти на GitHub.