+7 (747) 236 7503   mail@creoad.kz
Ежедневно с 12:00 до 22:00

Что такое Вебпак (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 из коробки.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Наш блог

Ознакомьтесь с нашими новостями!
17th Сен 2021
Что такое Вебпак (Webpack)

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

Узнать больше
16th Сен 2021
Что такое анкорные ссылки

С ростом числа коммерческих проектов в интернете поддерживать объем продаж на должном уровне становится все сложнее. Чтобы нарастить клиентскую базу […]

Узнать больше
16th Сен 2021
Система электронного обучения и тестирования Moodle: обзор возможностей

Moodle (расшифровывается как Modular Object-Oriented Dynamic Learning Environment) — бесплатная система электронного обучения. Это открытое веб-приложение, на базе которого можно […]

Узнать больше

Напишите нам

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

Отправьте нам сообщение

Контактная информация

Мы находимся

010000 г. Нур-Султан

Напишите нам

mail@creoad.kz

Creo logo