Готуємо з Webpack частина 2 – поняття та використання webpack завантажувачів

34

Від автора: у другій частині ми докладно вивчимо завантажувачі, їх можливості, принцип роботи, а також дізнаємося, як їх налаштувати. У першій частині ми познайомилися з webpack, дізналися, що це таке, а також вивчили деякі його можливості. Ми написали скрипт, підключили модуль до нього і створили пакет з допомогою webpack. Найважливіше з усього цього було те, що ми запакували кілька модулів. Тепер пора зрозуміти, що модуль може посилатися не тільки на JS файли. За замовчуванням в webpack підтримуються тільки JS модулі. Але що робити, якщо нам потрібно запакувати у вихідний файл CSS? Що якщо нам потрібно взяти шаблони HTML файлів верстки і використовувати їх в скрипті? Знайомтеся з завантажувачами.

Що таке завантажувач?

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

Іншими словами, з допомогою завантажувачів ми можемо сказати браузеру, щоб він застосував трансформації до файлів певного типу і завантажив їх у вихідний файл. Наприклад, якщо ми використали CSS завантажувач, ми можемо підключити CSS файл у будь-який файл JS. Потім за справу береться webpack, трансформує це інтерпретується в microsoft 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:

Hello!

Welcome to this awesome application. I hope you enjoy it.

More awesome

Переходимо в файл точку входу 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:

Hello!

Welcome to this awesome application. I hope you enjoy it.

More awesome

Якщо ми використовуємо HTML, нам потрібно якось включити його в DOM. Давайте займемося цим, створимо стандартну веб-сторінку:

touch index.html

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

Cooking With Webpack Part 2 — Using Loaders

Повернемося в файл 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.6 rem;
}

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

// 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. Додамо кнопку і контейнер, які будуть перетворювати вітання для нас:

Add Hello

Закомментіруем код у файлі 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.6 rem;
}

Замінивши код у файлі hello.html на цей:

Hello, World!

The best and most beautiful things in the world cannot be seen or even touched — they must be felt with the heart.

Пов’язуємо всі разом у файлі 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 шаблоні:

Hello, {{name}}!

The best and most beautiful things in the world cannot be seen or even touched — they must be felt with the heart.

Змінимо наш модуль hello.js, щоб він приймав name і рендерил шаблон з цієї змінної:

require(‘./hello.css’);
module.exports = function(name) {
if (name === undefined) {
name = ‘World’;
}
return require(‘./hello.hbs’)({
name: name
});
};

Якщо все запакувати і оновити сторінку, результат не зміниться, а це добре! Ми успішно відпрацювали компонент в ізоляції від решти файлів, підключили потрібні нам файли. Відредагуємо файл точку входу для кращого використання компонента. По-перше, додамо поле вводу в index.html:

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.