Що таке Webpack?

Webpack — це інструмент для пакування модулів, який перетворює ваш код (та будь-які залежності у формі JavaScript, CSS, зображень тощо) в оптимізовані файли, готові до розгортання в браузері. Webpack дозволяє спростити та автоматизувати процес збірки, надає підтримку сучасним стандартам JavaScript (ES6/ESNext) і допомагає розділити код на модулі.

Чому варто використовувати Webpack?

Розділення коду → Розділяє код на частини для оптимізації швидкості завантаження.
Tree Shaking → Видаляє невикористовуваний код, зменшуючи розмір пакету.
Гарячий модульний замінник (HMR) → Дозволяє оновлювати код в реальному часі без перезавантаження сторінки.
Управління активами → Ефективно обробляє зображення, шрифти та інші статичні файли.

Як працює Webpack?

1. Вхідна точка (entry point)

Webpack починає з основного файлу (наприклад, index.js). Це початкова точка вашого додатку.

2. Граф залежностей

Аналізує залежності проекту, відстежуючи import або require в коді.

3. Лоадери

За замовчуванням Webpack розуміє лише JavaScript та JSON. Лоадери дозволяють працювати з іншими типами файлів (CSS, зображення, TypeScript тощо):

babel-loader → Транспілює сучасний JS (ES6+) в ES5.
css-loader → Дозволяє імпортувати CSS в JS.
style-loader → Вбудовує стилі в DOM.

4. Плагіни

Розширюють функціональність Webpack:

HtmlWebpackPlugin → Генерує HTML файл з підключеними пакетами.
MiniCssExtractPlugin → Витягує CSS в окремі файли.
TerserPlugin → Мінімізує JavaScript.

5. Вихідні файли (output files)

Після обробки Webpack створює оптимізований пакет (наприклад, bundle.js) в вихідній папці (/dist).

Режими: Розробка та Продукція

Розробка: Зберігає код у читабельній формі, включає sourcemaps, не мінімізує. Корисно для локальної розробки та налагодження.

Продукція: Мінімізація та оптимізація (tree shaking, розділення коду), видаляє коментарі, часто вимикає карти джерел. Результат є "легким" та оптимізованим для продуктивного середовища.

Мінімальний приклад конфігурації Webpack

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Крок 1: Вхідна точка
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), // Крок 5: Вихідні файли
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }, // Лоадер для JS
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // Лоадери для CSS
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], // Плагіни
  mode: 'development', // або 'production'
};

Порівняння з іншими пакувальниками

Parcel — "zero config" пакувальник, що зосереджується на простоті.
Rollup — часто використовується для створення бібліотек, забезпечує ефективне tree shaking.
Vite — використовує ES модулі, дуже швидкий dev server, менше конфігурацій.

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

Зміст

Чому варто використовувати Webpack? Як працює Webpack? Режими: Розробка та Продукція Мінімальний приклад конфігурації Webpack Порівняння з іншими пакувальниками

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань