Вивчіть Webpack за 15 хвилин

Від автора: інструменти збірки стали невід’ємною частиною веб-розробки в основному із-за складності JS-додатків. Збирачі дозволяють запаковувати, компілювати і організовувати безліч файлів і бібліотек, необхідних у сучасних веб-проектах. У цьому уроці ми розповімо вам про webpack, потужний open-source збирач і препроцесор, вміє виконувати велику кількість різних завдань. Ми навчимо вас писати модулі, збирати код, а також використовувати деякі плагіни завантаження. Урок написаний для людей, абсолютно не знайомих з webpack. Однак рекомендується мати найменші знання JS.

Чому саме webpack?

Як і в будь-якому іншому аспекті веб-розробки, тут немає стандарту, який інструмент збірки використовувати. В даний час у розробників є вибір між webpack, Gulp, Browserify, NPM scripts, Grunt і ще 10 інструментами. У мережі є багато докладних порівнянь, проте всі інструменти дуже схожі. У більшості випадків вибір залежить від особистих переваг і проекту, над яким ви зараз працюєте.

Нижче наведено плюси і мінуси, щоб ви могли вирішити, чи підходить вам webpack чи ні:

Плюси:

Мінуси:

Установка

Найпростіше встановити webpack через пакетний менеджер. Ми будемо використовувати npm, але ви можете взяти Yarn чи інший менеджер. В обох випадках вам знадобиться Node.js і готовий package.json.

Рекомендується ставити webpack локально (без прапора –g), щоб у всіх, хто працює з вашим проектом, була одна версія

npm install webpack –save-dev

Після установки краще всього запустити webpack через скрипт Node.js. Додайте ці рядки в package.json:

//…
“scripts”: {
“build”: “webpack -p”,
“watch”: “webpack –watch”
},
//…

Тепер якщо в терміналі виконати команду npm run build, webpack збере наші файли (прапор –p означає продакшн, зібраний код минифицируется). Команда npm run watch запустить процес автоматичного складання файлів при внесення в них будь-яких змін.

Залишилося сказати webpack, які файли збирати. Рекомендується робити це через конфіг.

Конфіг файл webpack

Тут ми розберемо самий базовий конфіг файл, але не думайте, що все так просто. Конфіг в webpack досить потужна штука, в різних проектах він буде змінюватися. В деяких випадках він дуже складний.

Створіть в кореневій папці файл проекту webpack.config.js.

var path = require(‘path’);
module.exports = {
entry: ‘./assets/js/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
}
};

Опція entry – наш головний JS-файл. Існує безліч різних стратегій налаштування точки входу, але в більшості випадків єдиної точки буде достатньо.

Опція output задає ім’я і шлях до нашої збірки. Після запуску webpack весь JS-код запакуется в файл bundle.js. В HTML ми будемо підключати тільки цей файл:

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

Модулі webpack

Існує безліч способів роботи з модулями webpack, і в більшості випадків ви можете вибирати будь-який. У цьому уроці ми будемо використовувати синтаксис ES6 import.

Необхідно додати модуль привітання для наших користувачів. Для цього необхідно створити файл greeter.js і експортувати просту функцію (greeter.js):

function greet() {
console.log(‘Have a great day!’);
};
export default greet;

Щоб використовувати цей модуль, його необхідно імпортувати і викликати в нашій точці входу. Якщо погляньте трохи вище, то згадайте, що наша точка входу це index.js.

import greet from ‘./greeter.js’;
console.log(“i’m the entry point”);
greet();

Якщо тепер запустити збірку з допомогою npm run build і відкрити HTML в браузері, то ми побачимо:

Наша точка входу і модуль привітання були скомпільовані в один файл bundle.js, який виконався в браузері. Проста блок-схема дій:

Підключення бібліотек

Нам потрібно, щоб наше додаток в привітанні писало день тижня. Для цього нам знадобиться moment.js його необхідно безпосередньо імпортувати у модуль привітання.

Спочатку необхідно встановити бібліотеку через npm:

npm install moment –save

Далі в модулі привітання ми просто імпортуємо бібліотеку точно так само, як ми робили з локальними модулями в попередньому кроці (greeter.js):

import moment from ‘moment’;
function greet() {
var day = moment().format(‘dddd’);
console.log(‘Have a great’ + day + ‘!’);
};
export default greet;

Після повторної зборки в консолі браузера ми побачимо наступне повідомлення:

Діаграма тепер виглядає наступним чином:

Примітка: існують більш просунуті техніки підключення бібліотек, але вони виходять за рамки нашої статті. Читайте більш докладно по посиланню.

Завантажувачі

З допомогою завантажувачів webpack виконує завдання під час складання і робить пре/постпроцесинг файлів. Наприклад, завантажувачі можуть компілювати TypeScript, завантажувати компоненти Vue.js, рендери шаблони і багато іншого. Велика частина завантажувачів написана спільнотою розробників, список популярних можна подивитися за посиланням.

Скажімо, нам потрібно додати лінтер в наш проект для перевірки JS-коду на помилки. Для цього можна підключити JSHint loader, який буде ловити всі погані практики і код з помилками.

Спочатку необхідно встановити JSHint і webpack JSHint loader:

npm install jshint jshint-loader –save-dev

Далі необхідно додати пару рядків в конфіг файл webpack, щоб ініціалізувати завантажувач і передати тип файлів на перевірку, а також тип файлу, який потрібно ігнорувати (webpack.config.js).

var path = require(‘path’);
module.exports = {
entry: ‘./assets/js/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
// Додаємо JSHint loader
module: {
rules: [{
test: /\.js$/, // запускаємо loader на всіх файлах .js
exclude: /node_modules/, // ігноруємо всі файли з папки node_modules
use: ‘jshint-loader’
}]
}
};

Тепер при запуску webpack в терміналі відобразяться попередження (які ми ігноруємо):

Файл moment.js знаходиться в папці node_modules, і він не буде линтиться завантажувачем JSHint:

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