Які основні loaders підключаються для Frontend застосунку на React?

Для фронтенд-застосунку на React зазвичай підключають набір лоадерів, які дозволяють працювати з JSX, сучасним JavaScript, стилями та ресурсами.

---

#1. babel-loader - обробка JSX і сучасного JS

Завдання: транспілює JSX і новий синтаксис ES6+ у сумісний JavaScript. Використовується разом з пресетами:

---

#2. Лоадери для стилів (css-loader, style-loader або MiniCssExtractPlugin.loader)

Завдання: підключення CSS у проєкт.

Часто разом:

• css-loader - дозволяє імпортувати CSS у JS (import './styles.css')
• style-loader - вбудовує стилі в <style> у браузері (для development)
• у production замість style-loader зазвичай беруть MiniCssExtractPlugin.loader (CSS - в окремий файл)

---

#3. Лоадер для препроцесорів (за потреби)

Якщо використовується SCSS/SASS або LESS:

• sass-loader + sass
• або less-loader + less

---

#4. Лоадери для ресурсів

Щоб імпортувати картинки, шрифти, SVG тощо:

• asset/resource (або раніше file-loader)
• asset/inline (або раніше url-loader)

Сьогодні частіше використовують вбудований механізм asset, без додаткових пакетів.

---

#Підсумок - стандартний набір для React:

---