Suggest an edit

Improve this article

Refine the answer for “What main loaders are connected for a React frontend application?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

A **React** frontend application typically connects a set of loaders that let you work with JSX, modern JavaScript, styles, and assets.

---

### **1.** `babel-loader` **- processing JSX and modern JS**

Task: transpiles JSX and new ES6+ syntax into compatible JavaScript.
Used together with presets:

```bash
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react
```

---

### **2. Loaders for styles (**`css-loader`**,** `style-loader` **or** `MiniCssExtractPlugin.loader`**)**

Task: connecting CSS to the project.

Often together:

- `css-loader` - allows importing CSS into JS (`import './styles.css'`)
- `style-loader` - injects styles into `<style>` in the browser (for development)
- in production, `MiniCssExtractPlugin.loader` is usually used instead of `style-loader` (CSS goes into a separate file)

---

### **3. Loader for preprocessors (as needed)**

If SCSS/SASS or LESS is used:

- `sass-loader` + `sass`
- or `less-loader` + `less`

---

### **4. Loaders for assets**

To import images, fonts, SVG, and so on:

- `asset/resource` (or `file-loader` previously)
- `asset/inline` (or `url-loader` previously)

Today the built-in `asset` mechanism is more commonly used, without extra packages.

---

### **Summary - standard set for React:**

| Loader | For what |
|---|---|
| `babel-loader` | JSX and modern JS |
| `style-loader` | Injecting CSS at runtime (dev) |
| `css-loader` | Importing CSS |
| `sass-loader` (optional) | SCSS/SASS |
| `asset/resource` | Images, fonts, files |

---

Markdown · drag & drop images · ⌘B / ⌘I shortcuts220 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.