У першій частині туторіалу ми дізналися, як створити 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, можливо, хтось вже зробив там те, що вам потрібно.
Ще немає коментарів