Что такое Вебпак (Webpack)

Webpack – это статический модульный сборщик для приложений на JavaScript. Официальный сайт проекта: https://webpack.js.org/

Сегодня поговорим, что это за технология, в каких проектах она используется и в чем состоят ее основные преимущества. 

Зачем нужен Вебпак

Приложения, написанные на JavaScript, постоянно усложняются, поэтому для сбора модулей все чаще используют специальный инструмент – бандлер. Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. Можно использовать не только сторонние библиотеки, но и собственные файлы. Подобная модульная система позволяет добиться лучшей организации проекта, так как он разбивается на небольшие модули.

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

Начнем с плюсов: он отлично подходит для работы с одностраничными приложениями. Также вебпак может осуществлять продвинутое разделение кода. Из-за этих и других преимуществ он является одним из наиболее популярных инструментов JS-разработки на данный момент.

Минусы: немного сложно разобраться в его работе, часть документации устарела из-за большого количества изменений в обновлениях.

Установка и настройка Webpack

Вебпак можно установить при помощи менеджера пакетов, например, 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.

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

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

1. Свойство test определяет, какие файлы должны быть трансформированы.
2. Свойство 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.

Много плагинов поставляются сразу с Webpack из коробки. Их список можно найти здесь.

Заключение

Вебпак – это полезный и гибко настраиваемый инструмент для разработки, который постоянно дорабатывается и улучшается.

Актуальная версия на момент написания статьи –v4.2.0. Все релизы можно найти на GitHub.