Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які ключові поля є в конфігурації Webpack?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Ключові поля конфігурації **Webpack** - це `entry`, `output`, `mode`, `module`, `plugins`, `resolve`, `devServer`, `devtool` і `optimization`, кожне з яких відповідає за окремий аспект збірки. **Ключове:** ці поля становлять основу будь-якого Webpack-конфіга, все інше будується навколо них.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДо ключових полів у конфігурації Webpack належать: --- ### **1.** `entry` Вказує **точку входу** - файл, з якого Webpack починає збірку. --- ### **2.** `output` Визначає **куди і як виводити підсумкові файли** (папка, ім'я бандла тощо). --- ### **3.** `mode` Режим збірки: `development`, `production` або `none`. Впливає на оптимізації та поведінку збірки. --- ### **4.** `module` Секції для **правил обробки файлів** через `loaders`. Наприклад, щоб обробляти CSS, зображення, TypeScript, JSX тощо: ```js module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } ``` --- ### **5.** `plugins` Підключення **плагінів**, які розширюють функціональність збірки (мінімізація, копіювання файлів, генерація HTML тощо). --- ### **6.** `resolve` Визначає **як Webpack має шукати модулі**: розширення (`.js`, `.ts`, `.jsx`), аліаси, шляхи. --- ### **7.** `devServer` Налаштування **локального dev-сервера**: автооновлення, HMR, порт тощо. --- ### **8.** `devtool` Керування **source maps** - як відображати вихідний код під час налагодження. --- ### **9.** `optimization` Тонке налаштування **оптимізації**, мінімізація, розділення коду (splitChunks), tree-shaking тощо. --- ### **Коротко** | Поле | За що відповідає | |---|---| | `entry` | Точка входу в застосунок | | `output` | Куди і як виводити збірку | | `mode` | Поведінка збірки (dev/prod) | | `module` | Правила для лоадерів | | `plugins` | Розширення можливостей | | `resolve` | Як шукати модулі | | `devServer` | Dev-сервер | | `devtool` | Source maps | | `optimization` | Оптимізація збірки | --- Ці поля становлять основу будь-якого Webpack-конфіга, все інше будується навколо них.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.