Які ключові поля є в конфігурації Webpack?
До ключових полів у конфігурації Webpack належать:
1. entry
Вказує точку входу - файл, з якого Webpack починає збірку.
2. output
Визначає куди і як виводити підсумкові файли (папка, ім'я бандла тощо).
3. mode
Режим збірки: development, production або none. Впливає на оптимізації та поведінку збірки.
4. module
Секції для правил обробки файлів через loaders. Наприклад, щоб обробляти CSS, зображення, TypeScript, JSX тощо:
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-конфіга, все інше будується навколо них.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.