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

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

Ви можете використовувати Grunt або Gulp, побудувавши ланцюжки перетворень, які дадуть можливість вам закинути свій код в один кінець ланцюжка і отримати мінімізовані CSS та JavaScript на іншому.

Подібні інструменти розробки дуже популярні і корисні в наші дні. Проте, є й інший метод полегшення розробки - Webpack.

Що таке Webpack?

Webpack - це те, що відомо нам як "бандлер модулей". Він приймає модулі JavaScript, аналізує їх залежності один від одного, а потім з'єднує їх найефективнішим способом, випускаючи у кінці лише один JavaScript файл. Нічого особливого, правда? Наприклад RequireJS робить подібне вже багато років.

З Webpack, модулі не обмежені тільки файлами JavaScript. Завдяки Лоадерам, Webpack розуміє, що модуль JavaScript може потребувати CSS файл, а цей CSS файл може потребувати зображення. Результат роботи Webpack буде містити тільки те, що потрібно. Давайте розглянемо цей інструмент і випробуємо Webpack в дії.

Інсталяція

Як і більшість інструментів розробки, перед початком роботи вам потрібно буде встановити Node.js. Припустимо, що він вже встановлений. Все, що потрібно тепер зробити - ввести наступну команду в командний рядок.

npm install webpack -g

Це встановить Webpack і дасть можливість запускати його будь-де у вашій системі. Створіть нову папку і базовий HTML-файл у ній. Наприклад:

        <meta charset="utf-8">
        <title>Webpack fun</title>
    
        <h2></h2>
        <script src="bundle.js"></script>

Важливою частиною тут є посилання на bundle.js, саме те, що Webpack буде робити для нас. Також зверніть увагу на елемент h2 - ми будемо використовувати його пізніше.

Потім створіть два файли в тій самій папці, що і ваш HTML-файл. Назвіть перший main.js, він, очевидно, буде основним файлом для нашого скрипту. Другий файл, say-hello.js, буде простим модулем, який братиме ім'я користувача та DOM-елемент, і виводитиме повідомлення з привітанням після цього.

// say-hello.js
 
module.exports = function (name, element) {
    element.textContent = 'Hello ' + name + '!';
};

Тепер, коли у нас є простий модуль, ми можемо викликати його з main.js:

var sayHello = require('./say-hello');
 
sayHello('Guybrush', document.querySelector('h2'));

Тепер, якщо ми відкриємо наш HTML файл, цього повідомлення ми не побачимо, так як ми не включили main.js та не зібрали залежності для браузера. Що нам потрібно зробити, так це сказати Webpack заглянути у main.js і перевірити, чи є там які-небудь залежності. Якщо є, він повинен зібрати їх разом і створити файл bundle.js, яким ми зможемо користуватися в браузері.

Поверніться до терміналу і запустіть Webpack. Далі введіть:

webpack main.js bundle.js

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

Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.65 kB       0  [emitted]  main
   [0] ./main.js 90 bytes {0} [built]
   [1] ./say-hello.js 94 bytes {0} [built]

Тепер відкрийте index.html у вашому браузері. Ваша веб-сторінка вас привітає.

Конфігурація

Вказувати вхідні і вихідні файли при кожному запуску Webpack - не найкраща практика. На щастя, Webpack дає можливість використовувати конфіг файл, щоб позбавити нас від проблем. Створіть файл під назвою webpack.config.js в кореневій папці вашого проекту, який буде містити наступне:

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
};

Теперь ми можемо нічого не писати, крім webpack, щоб отримати той самий результат.

Сервер розробки

Вводити webpack кожен раз, коли ви міняєте файл, все одно потребує занадто багато зусиль? Окей, давайте створимо невеликий сервер розробки, щоб зробити усе ще ефективнішим. У терміналі напишіть:

npm install webpack-dev-server -g

Потім введіть команду webpack-dev-server. Це запустить простий веб-сервер, використовуючи поточну папку як кореневу. Відкрийте нове вікно у браузері і перейдіть до http://localhost:8080/webpack-dev-server/. Якщо все зроблено правильно, то ви побачите щось подібне:

Тепер у нас є не тільки веб-сервер, а й сервер, який буде стежити за змінами нашого коду. Якщо він побачить, що ми змінили файл, то він буде автоматично запускати команду Webpack для бандлу нашого коду та оновлення сторінки, не потребуючи ніяких дій з нашого боку. Ніякої конфігурації.

Спробуйте змінити ім'я, яке передається функції sayHello і повернутися у браузер.

Лоадери (Loaders)

Одна з найбільших особливостей Webpack - Лоадери. Лоадери аналогічні до "завдань" у Grunt і Gulp. Вони беруть файли і перетворюють їх у деякий вигляд, перш ніж ці файли будуть включені в бандл нашого коду.

Скажімо, ми хотіли використати деякі тонкощі ES2015 в нашому коді. ES2015 - це нова версія JavaScript, яка підтримується не у всіх браузерах, тому нам треба використати лоадер, щоб перетворити наш ES2015 код у звичайний старий ES5 код, який підтримується всюди. Для цього ми використовуємо популярний Babel Loader, який, відповідно до інструкцій, ми встановлюємо так:

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

Це встановлює не тільки сам лоадер, але й його залежності та ES2015, так як Babel повинен знати, який тип JavaScript'у йому перетворювати.

Тепер, коли лоадер встановлений, нам просто потрібно сказати Babel використати його. Оновіть webpack.config.js наступним чином:

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

Тут є кілька важливих моментів. Першим є рядок test: /\\.js$/, що є виразом, який каже нам застосувати цей лоадер до всіх файлів з розширенням .js. Так само exclude: /node_modules/ каже Webpack ігнорувати папку node_modules. loader і query очевидно, кажуть використовувати лоадер Babel з ES2015.

Перезавантажте ваш веб-сервер і знову запустіть webpack-dev-server. Все, що нам потрібно тепер зробити - використати деякий ES6 код, щоб протестувати усе. Як щодо того, щоб змінити нашу змінну sayHello на константу?

const sayHello = require('./say-hello')

Після збереження, Webpack повинен автоматично перезібрати ваш код і оновити браузер. Напевно, ви не побачите ніяких змін. Загляніть у bundle.js, чи знайдете ви ключове слово const? Якщо Webpack і Babel зробили свою роботу, ви ніде не побачите його, тільки старий JavaScript.

До частини 2

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