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

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

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

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

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

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

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

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

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
 path: path.join(__dirname, 'dist'),
 filename: 'index.bundle.js'
  },
  module: {
 loaders: []
  }
};

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

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

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

Узнать подробнее
loaders: [
  {
 test: /\.extension$/,
 loader: 'some-loader'
  },
  {
 test: /\.differentextension$/,
 loaders: ['some-loader', 'another-loader']
  }
]

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

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

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

npm install html-loader --save-dev

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

{
  test: /\.html$/,
  loader: 'html'
}

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

<h1>Hello!</h1>
<p>Welcome to this awesome application. I hope you enjoy it.</p>
<button>More awesome</button>

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

var hello = require('./hello.html');

console.log(hello);

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

npm run build

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

node dist/index.bundle.js

output:

<h1>Hello!</h1>
<p>Welcome to this awesome application. I hope you enjoy it.</p>
<button>More awesome</button>

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

touch index.html

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cooking With Webpack Part 2 - Using Loaders</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/index.bundle.js"></script>
</body>
</html>

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

var hello = require('./hello.html');
var app = document.querySelector('#app');

app.innerHTML = hello;

Сохраняем, компилируем с помощью 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, резолвит пути и т.д.

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

npm install style-loader css-loader --save-dev

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

{
  test: /\.css$/,
  loaders: ['style', 'css']
}

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

touch src/style.css

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: sans-serif;
  font-size: 1.6rem;
}

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

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

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

Узнать подробнее
// index.js
require('./style.css');

var hello = require('./hello.html');
var app = document.querySelector('#app');

app.innerHTML = hello;

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

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

<button class="js-add-hello">Add Hello</button>
<div id="hellos"></div>

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

require('./hello.css');

module.exports = function() {
  return require('./hello.html');
};

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

touch src/hello.css

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

.Hello {
  margin: 2rem 0;
  padding: 2rem;
  border: solid 1px #ddd;
}

.Hello-title {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

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

<div class="Hello">
  <h3 class="Hello-title">Hello, World!</h3>
  <p>The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.</p>
</div>

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

require('./style.css');

var hello = require('./hello.js');

var button = document.querySelector('.js-add-hello');
var hellos = document.querySelector('#hellos');

button.addEventListener('click', function(e) {
  e.preventDefault();

  hellos.insertAdjacentHTML('beforeend', hello());
});

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

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

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

npm install handlebars handlebars-loader --save-dev
cp src/hello.html src/hello.hbs

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

{
  test: /\.hbs$/,
  loader: 'handlebars'
}

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

<div class="Hello">
  <h3 class="Hello-title">Hello, {{name}}!</h3>
  <p>The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.</p>
</div>

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

require('./hello.css');

module.exports = function(name) {
  if (name === undefined) {
 name = 'World';
  }

  return require('./hello.hbs')({
 name: name
  });
};

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

<input type="text" class="Input js-add-hello" placeholder="Type a name and hit enter">

И JS:

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

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

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

npm install babel-loader babel-core babel-preset-es2015 --save-dev

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

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
 presets: ['es2015']
  }
}

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

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

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

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

// index.js
import './style.css';

import hello from './hello.js';

const input = document.querySelector('.js-add-hello');
const hellos = document.querySelector('#hellos');

input.addEventListener('keyup', e => {
  if (e.keyCode === 13) {
 hellos.insertAdjacentHTML('beforeend', hello(e.target.value));
 input.value = '';
  }
});

// hello.js
import './hello.css';

import helloTpl from './hello.hbs';

export default function(name = 'World') {
  return helloTpl({
 name: name
  });
};

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

Заключение

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

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree