Suggest an edit

Improve this article

Refine the answer for “What are the key fields in a Webpack configuration?”. 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)

The key fields in a Webpack configuration include:

---

### **1.** `entry`

Specifies the **entry point** - the file from which Webpack starts the build.

---

### **2.** `output`

Determines **where and how to output the final files** (folder, bundle name, etc.).

---

### **3.** `mode`

The build mode: `development`, `production`, or `none`. Affects optimizations and build behavior.

---

### **4.** `module`

Sections for **file-processing rules** via `loaders`. For example, to handle CSS, images, TypeScript, JSX, etc.:

```js
module: {
  rules: [
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}
```

---

### **5.** `plugins`

Connects **plugins** that extend the build's functionality (minification, file copying, HTML generation, etc.).

---

### **6.** `resolve`

Determines **how Webpack should look for modules**: extensions (`.js`, `.ts`, `.jsx`), aliases, paths.

---

### **7.** `devServer`

Settings for the **local dev server**: auto-reload, HMR, port, etc.

---

### **8.** `devtool`

Controls **source maps** - how to display source code during debugging.

---

### **9.** `optimization`

Fine-grained **optimization** settings: minification, code splitting (splitChunks), tree shaking, etc.

---

### **Briefly**

| Field | What it's responsible for |
|---|---|
| `entry` | The application's entry point |
| `output` | Where and how to output the build |
| `mode` | Build behavior (dev/prod) |
| `module` | Rules for loaders |
| `plugins` | Extending capabilities |
| `resolve` | How to look for modules |
| `devServer` | Dev server |
| `devtool` | Source maps |
| `optimization` | Build optimization |

---

These fields form the basis of any Webpack config, everything else is built around them.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.