Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які основні loaders підключаються для Frontend застосунку на React?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Для фронтенд-застосунку на **React** зазвичай підключають набір лоадерів, які дозволяють працювати з JSX, сучасним JavaScript, стилями та ресурсами. **Ключове:** стандартний набір для React - це `babel-loader`, `style-loader`, `css-loader`, опційно `sass-loader` і `asset/resource`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДля фронтенд-застосунку на **React** зазвичай підключають набір лоадерів, які дозволяють працювати з JSX, сучасним JavaScript, стилями та ресурсами. --- ### **1.** `babel-loader` **- обробка JSX і сучасного JS** Завдання: транспілює JSX і новий синтаксис ES6+ у сумісний JavaScript. Використовується разом з пресетами: ```bash npm install babel-loader @babel/core @babel/preset-env @babel/preset-react ``` --- ### **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:** | Loader | Для чого | |---|---| | `babel-loader` | JSX і сучасний JS | | `style-loader` | Вставка CSS у runtime (dev) | | `css-loader` | Імпорт CSS | | `sass-loader` (опційно) | SCSS/SASS | | `asset/resource` | Картинки, шрифти, файли | ---Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.