Що таке webpack?

Повне пояснення

Що це і навіщо Webpack — інструмент, що конвертує модулі (ES6+, TypeScript, CSS, зображення) у статичні ресурси, які браузер може виконати. Він потрібен для:

• управління залежностями між файлами;
• трансформації коду (Babel, TS);
• оптимізації розміру бандлів (tree shaking, minification).

Ключові принципи

• Entry – точка входу, з якої Webpack починає збірку.
• Output – місце, куди зберігаються готові бандли.
• Loaders – функції, що перетворюють файли перед їх включенням у граф.
• Plugins – розширення, що виконують додаткові дії (наприклад, HtmlWebpackPlugin генерує index.html).
• Mode – development або production, що визначає оптимізації.

Як це працює

1. Webpack читає entry і будує граф залежностей.
2. Для кожного файлу застосовуються відповідні loaders (наприклад, ts-loader для TypeScript).
3. Після трансформації файли об’єднуються у бандл.
4. Plugins виконують додаткові кроки (генерація HTML, копіювання статичних файлів).
5. Результат зберігається у output.

Практика і реалізація

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  output: { filename: 'bundle.js', path: __dirname + '/dist' },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }
    ]
  },
  resolve: { extensions: ['.ts', '.js'] },
  mode: 'production'
};

Тестування – Webpack сам по собі не тестує, але можна інтегрувати з Jest або Vitest через webpack-jest-transform.

Дизайн‑рішення – для великих проектів рекомендується розділити бандли за entry (наприклад, app.js, vendor.js) і використовувати SplitChunksPlugin.

Производительность – включення cache: { type: 'filesystem' } прискорює повторні збірки.

Безпека – у продакшн‑режимі Webpack автоматично мінімізує код, що зменшує поверхню атаки.

Особливості в контексті JS / TS Core – Webpack є стандартом для створення SPA, але в сучасних фреймворках (Next.js, Vite) часто замінюється більш швидкими альтернативами.

Оптимізація та типові помилки

• Не вказати mode: 'production' → великий бандл.
• Залишити exclude: /node_modules/ у loader‑ах → зайві трансформації.
• Неправильний resolve.extensions → помилки при імпорті без розширення.
• Відсутність output.clean: true → накопичення старих бандлів.

Чеклист діагностики

• Синтаксична помилка в config → Webpack видає чітке повідомлення.
• Missing loader → помилка «Module not found: Can't resolve».
• Бандл не підвантажується → перевірити output.publicPath.

Альтернативи – Vite, Rollup, Parcel. Вибір залежить від вимог до швидкості розробки та складності конфігурації.