Основи Webpack: Частина 2

У першій частині туторіалу ми дізналися, як створити Webpack проект, а також як використовувати лоадери для обробки нашого JavaScript коду. Але найголовніша властивість Webpack полягає в його здатності бандлити інші типи, такі як CSS і зображення, та включати їх у проекти тільки тоді, коли вони необхідні. Давайте почнемо з додавання стилів до нашої сторінки.

Лоадери стилів

Спочатку, створіть звичайний CSS файл в папці зі стилями. Назвіть його main.css та додайте туди трохи стилів для заголовку.

h2 {
    background: blue;
    color: yellow;
}

А як же ця таблиця стилів буде відображатися на нашій сторінці? Як і більшість розробок на Webpack, нам знадобиться ще один лоадер. Насправді, два: css-loader і style-loader. Перший читає стилі з наших CSS-файлів, а другий вставляє ці стилі в нашу HTML-сторінку. Інсталюйте їх наступним чином:

npm install style-loader css-loader

Далі, ми кажемо Webpack, як використовувати їх. У webpack.config.js нам потрібно додати ще один об'єкт в масив лоадерів. У ньому ми вкажемо на формат CSS файла, а також лоадер, який використовується.

{
    test: /\\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}

Цікавим у цьому коді є рядок 'style!css'. Лоадери читаються справа наліво, так що це каже Webpack спочатку прочитати стилі будь-якого файлу, який закінчується на .css, а потім вставити ці стилі на нашу сторінку.

Оскільки ми оновили свій конфігураційний файл, нам потрібно буде перезавантажити сервер розробки, щоб наші зміни запрацювали. Використовуйте ctrl+c, щоб зупинити роботу сервера та webpack-dev-server, щоб запустити його знову.

Все, що нам зараз потрібно зробити - вставити нашу таблицю стилів у main.js. Це робиться так само, як ми робили це з модулем JavaScript:

const sayHello = require('./say-hello');
 
require('./styles/main.css');
 
sayHello('Guybrush', document.querySelector('h2'));

Зверніть увагу, ми взагалі нічого не робили з index.html. Відкрийте ваш браузер, щоб побачити сторінку із стильованим h2. Змініть колір заголовку в таблиці стилів, щоб побачити оновлення без перезапуску сторінки. Чудово.

Потрібен Sass

На щастя Webpack має спеціальний лоадер. Встановіть його відповідно до версії вашого Sass за допомогою:

npm install sass-loader node-sass

А потім оновіть webpack.config.js:

{
    test: /\\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}

Ми вказали, що для будь-якого файлу, який закінчується на .scss, потрібно конвертувати Sass в звичайний CSS, прочитати стилі з CSS, а потім вставити стилі на сторінку. Не забудьте перейменувати main.css на main.scss. Код Sass:

$background: blue;
 
h2 {
    background: $background;
    color: yellow;
}

У main.js:

require('./styles/main.scss');

Супер. Це так само просто. Ніяких конвертувать і збережень файлів, або навіть заглядань у папки. Ми просто безпосередньо вказали на наші стилі Sass.

Зображення

"А як же зображення? Теж лоадери?" Звичайно! З зображеннями ми будемо використовувати URL-лоадер. Цей лоадер бере URL вашого зображення та оновлює шлях таким чином, щоб він правильно був включений у ваш бандл файлів. Як завжди:

npm install url-loader

Тепер, давайте спробуємо щось інше у нашому webpack.config.js. Додайте це у масив лоадерів знайомим нам способом, але на цей раз ми хочемо вказати зображенням відповідні розширення файлів:

{
    test: /\\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}

Зверніть увагу. Ми не використовуємо тут exclude. Замість цього ми використовуємо include. Це більш ефективний спосіб, оскільки так ми говоримо WebPack ігнорувати все, що не відповідає папці під назвою "images".

Зазвичай ви будете використовувати деяку систему шаблонів, щоб створити свою HTML-сторінку з зображеннями, але ми збираємося створити тег зображення на JavaScript, підемо старомодним способом. Спочатку створимо елемент зображення, вставимо потрібне зображення в атрибут src, а потім додамо елемент на сторінку.

var imgElement = document.createElement('img');
 
imgElement.src = require('./images/my-image.jpg');
 
document.body.appendChild(imgElement);

Поверніться до вашого браузера, щоб побачити результат на власні очі.

Прелоадери

Ще одна річ, яка зазвичай проводиться під час розробки - це лінтінг. Лінтінг - це процес, під час якого ми шукаємо потенційні помилки в коді та перевіряємо, чи зробили ми все згідно з деякими правилами кодування. "Чи використав я змінну без її оголошення?" або "Чи забув я крапку з комою в кінці рядка?"

Через застосування цих правил, ми можемо позбутися дурних помилок на початкових стадіях.

Популярним інструментом для лінтінгу є JSHint. Він сканує наш код і виділяє можливі помилки, які ми можемо допустити. JSHint можна запускати вручну через командний рядок, але це швидко набридає у процесі розробки. В ідеалі ми хотіли б, щоб інструмент автоматично запускався кожен раз, коли ми зберігаємо файл. І ви вгадали - ще один лоадер.

Встановіть jshint-loader звичним способом:

npm install jshint-loader

Знову нам потрібно сказати Webpack використовувати його, додавши до webpack.config.js. Проте, цей лоадер трохи відрізняється від інших. Він не перетворює код, а просто перевіряє його. Ми не хочемо, щоб всі інші лоадери не запрацювали тільки тому, що ми забули крапку з комою. Для цього й існують прелоадери. Прелоадер - це будь-який лоадер, який робить запуск перед нашими основними завданнями. Він додається до webpack.conf.js так само, як і звичайні лоадери.

module: {
    preLoaders: [
        {
            test: /\\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

Тепер наш процес лінтінгу буде працювати і зупиняти свою роботу тоді, коли виявить якусь проблему. Перед тим, як перезапустити наш веб-сервер, нам треба сказати JSHint, що ми використовуємо ES6, в іншому випадку він не запрацює коректно, коли наткнеться на слово const у нашому коді.

Після модульного ключа в нашому файлі конфігурації, додайте ще один запис під назвою "jshint" і рядок, який вказуватиме версію JavaScript.

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

Збережіть файл та перезапустіть webpack-dev-server. Працює? Чудово. Це означає, що ваш код не містить помилок. Зробимо одну, видаливши крапку з комою з цього рядка:

var imgElement = document.createElement('img')

Знову збережіть файл і перейдіть до терміналу. Ми отримаємо наступне:

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

Підготовка до реального запуску

Тепер, коли ми щасливі, що наш код у формі, і він працює як треба, нам потрібно підготувати його до реального світу. Одним з найбільш поширених завдань - мінімізувати його, зв'язати всі ваші файли в один, а потім стиснути у як можна менший файл. Перш ніж ми продовжимо, подивіться на bundle.js. Він читабельний, має багато пробілів, і його розмір 32кб.

"Чекайте! Тільки не кажіть, що ще один лоадер!" Ні! У цьому рідкісному випадку, нам не потрібен лоадер. Коли ви підготували ваш код, просто запустіть наступну команду:

webpack -p

-p каже Webpack підготувати наш код до реальної роботи, тобто оптимізувати наш бандл.

Після запуску цієї команди, відкрийте bundle.js і погляньте як все було стиснуто разом.

Висновки

Я сподіваюся, що ці дві частини туторіалу дали вам достатньо знань, щоб почати використовувати Webpack у власних проектах. Пам'ятайте, що якщо є щось, що ви хочете зробити в процесі розробки, то цілком можливо, для цього вже є відповідний лоадер у Webpack. Всі лоадери встановлюються за допомогою npm, можливо, хтось вже зробив там те, що вам потрібно.