Готовим с Webpack часть 2 – понятие и использование webpack загрузчиков

Готовим с Webpack часть 2 – понятие и использование webpack загрузчиков

От автора: во второй части мы подробно изучим загрузчики, их возможности, принцип работы, а также узнаем, как их настроить. В первой части мы познакомились с webpack, узнали, что это такое, а также изучили некоторые его возможности. Мы написали скрипт, подключили модуль к нему и создали пакет с помощью webpack. Самое важное из всего этого было то, что мы запаковали несколько модулей. Теперь пора понять, что модуль может ссылаться не только на JS файлы. По умолчанию в webpack поддерживаются только JS модули. Но что делать, если нам нужно запаковать в выходной файл CSS? Что если нам нужно взять HTML шаблоны из файлов верстки и использовать их в скрипте? Знакомьтесь с загрузчиками.

Что такое загрузчик?

Из документации: «Загрузчики представляют собой трансформации, применяемые к исходному файлу вашего приложения. Это функции (под управлением node.js), берущие исходные данные из файлов в качестве параметров и возвращающие новые исходники.»

Другими словами, с помощью загрузчиков мы можем сказать браузеру, чтобы он применил трансформации к файлам определенного типа и загрузил их в выходной файл. Например, если мы использовали CSS загрузчик, мы можем подключить CSS файл в любой файл JS. Потом за дело берется webpack, трансформирует это в интерпретируемый JS код и возвращает пакет. Для webpack есть масса готовых загрузчиков. Разберем парочку из них на реальных примерах и исследуем выходные файлы.

Синтаксис настроек загрузчика

Нам понадобится новый ключ module в файле настроек. В нем мы будем хранить все наши загрузчики в виде массива с ключом loaders. Наш код будет строиться на примере из первой части, скопируйте файлы. Теперь наш файл должен выглядеть так:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Не вдаваясь в подробности, все загрузчики представлены в виде объектов с тестом на регулярное выражение. Далее идет строка или массив применяемых загрузчиков. Например:

Особый интерес вызывает второй загрузчик. Здесь мы сцепили несколько загрузчиков. Иногда это необходимо и очень полезно. Добавим наш первый загрузчик и вставим его в тест.

Стандартные шаблоны с HTML загрузчиком

Представим ситуацию: у нас есть простое JS приложение, в основе которого лежит некое взаимодействие с пользователем, а нам нужно показать HTML шаблон. Чтобы не складывать все в одну корзину, мы хотим, чтобы наш HTML хранился в отдельном файле, но по требованию мог подключаться и запаковываться. HTML loader – идеальный кандидат. Давайте установим его:

Переходим в настройки webpack, добавляем загрузчик:

Создаем HTML шаблон в src/hello.html:

Переходим в файл точку входа src/index.js, удаляем старый код. Посмотрим, что произойдет, если подключить HTML шаблон и вывести логи в консоль:

Создаем пакет с помощью команды:

Откроем файл dist/index.bundle.js, давайте посмотрим, что в нем. Прокручиваем до первого модуля. Видим, что результат __webpack_require__(1) присвоен переменной hello. Во втором модуле (с индексом 1 в массиве) загрузчик применил правильные трансформации к HTML шаблону и конвертировал его в строку с новыми символами. Давайте сами посмотрим на это, запустив пакет в node:

Если мы используем HTML, нам нужно как-то включить его в DOM. Давайте займемся этим, создадим стандартную веб-страницу:

В файле пропишем стандартный HTML5 код, добавим тег div для нашего HTML, а также подключим наш запакованный JS:

Вернемся в файл src/index.js. Напишем простенький JS код для вставки шаблона в наше приложение при запуске скрипта:

Сохраняем, компилируем с помощью npm run build и открываем файл index.html в браузере. Если вы как я радуетесь даже маленьким победам, то вы подскочите со стула. Мы успешно подключили HTML шаблон в наш JS, трансформировав его с помощью загрузчика. С помощью загрузчика мы вставили шаблон в DOM запакованного скрипта.

Вставка стилей с помощью Style и CSS Loader

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

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

При работе со стилями стоит рассмотреть два загрузчика:

style loader – вставляет CSS в DOM с помощью тега style;

CSS loader – интерпретирует CSS, резолвит пути и т.д.

Установим оба загрузчика:

Добавим в настройки webpack загрузчики:

На этот раз мы использовали массив загрузчиков. Webpack позволяет сцеплять загрузчики с помощью массива с ключом loaders. Создадим первый файл стилей:

Пропишем в этом файле базовые стили:

Переходим в файл точку входа, подключим стили в самом верху:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Запаковываем с помощью npm run build и открываем в браузере index.html. Стили должны примениться. Круто! Давайте откроем файл dist/index.bundle.js. Webpack создает еще один модуль для нас, который по необходимости загружается с помощью __webpack_require__. Он трансформировал наши стили в читаемый JS код, пробежался по коду, распарсил его и вставил стили в тег style в тег head дерева DOM. Если открыть вкладку с разметкой в консоли браузера, стили действительно на месте. Замечательно!

Давайте немного отрефакторим наше приложение. Перейдите в файл index.html. Добавим кнопку и контейнер, которые будут отрисовывать приветствие для нас:

Закомментируем код в файле hello.js и позволим нашему модулю подключить CSS и вернуть шаблон hello:

Нам нужно создать файл hello.css, сделаем это:

Скопируем в него стили:

Заменив код в файле hello.html на этот:

Связываем все вместе в файле index.js:

Запаковываем все с помощью npm run build и открываем index.html в браузере. Вуаля, наше приложение работает!

Вы можете подумать, что все, что мы сейчас проделали, не имеет ничего общего с webpack. Я не соглашусь. Да, мы могли бы написать все это в JS файле и CSS файле. Но на самом деле мы проверили возможности webpack. Мы все разделили, сгруппировали разметку, стили и логику компонента hello. Webpack позволил нам изолированно работать с компонентом hello, после чего запаковать его с остальными файлами проекта.

Чтобы доказать свою точку зрения, давайте поработаем только с компонентом hello. Чтобы код больше походил на шаблон, давайте использовать handlebars вместо обычного HTML:

Подключим handlebars трансформации в конфиге:

Добавим переменную name в handlebars шаблоне:

Изменим наш модуль hello.js, чтобы он принимал name и рендерил шаблон с этой переменной:

Если все запаковать и обновить страницу, результат не изменится, а это хорошо! Мы успешно отработали компонент в изоляции от остальных файлов, подключили нужные нам файлы. Отредактируем файл точку входа для лучшего использования компонента. Во-первых, добавим поле ввода в index.html:

И JS:

Запаковываем, обновляем и вуаля. Красота.

Переход на современный JavaScript с помощью Babel Loader

Подводя статью к завершению, я покажу вам еще один загрузчик, с помощью которого можно писать JS следующего поколения с помощью babel. Babel – JS компилятор с множеством настроек. Но мы не будем ничего усложнять. Как обычно, нам понадобится babel loader и несколько других зависимостей, судя по документации:

Пакет babel-loader необходим для фактической загрузки в webpack, babel-core нужен для компиляции JS, а babel-preset-es2015 задает базовые шаблоны. Подключим загрузчик в конфиге:

Здесь мы использовали два дополнительных свойства загрузчика:

exclude для исключения из трансформаций на основе регулярного выражения;

query для отправки информации в настройки babel.

Теперь можно поменять весь JS:

Запаковываем, обновляем браузер и бум! Магия. Теперь можно писать JS следующего поколения где угодно, благодаря функционалу webpack по загрузке и трансформации в паре с babel. Удивительно!

Заключение

Ну и ну! На этот раз мы окунулись в мир загрузчиков и посмотрели, как они применяют трансформации к нашим пакетам. Загрузчики имеют высокое значение в среде webpack. Надеюсь, я дал достаточно информации, чтобы вы сами смогли настроить их. Если у вас возникли вопросы, комментарии или хотите связаться со мной, пишите об этом ниже или открывайте обсуждение на GitHub.

Источник: http://callmenick.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree