Suggest an edit

Improve this article

Refine the answer for “How do you set up Webpack to run for development?”. 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)

To set up Webpack for **development**, you need to enable `development` mode, add a dev server, and add a start command to `package.json`.

---

### **1. Install Webpack and the dev server**

```bash
npm install webpack webpack-cli webpack-dev-server --save-dev
```

---

### **2. Set up** `webpack.config.js`

Minimal configuration for development:

```js
const path = require('path');

module.exports = {
  mode: 'development',                 // development mode
  entry: './src/index.js',             // entry point
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',               // convenient debugging
  devServer: {
    static: path.resolve(__dirname, 'dist'), // serve files from dist
    port: 3000,                         // any port
    hot: true,                          // HMR - update without reloading
    open: true,                         // auto-open the browser
  },
};
```

What this configuration enables:

| Option | Why |
|---|---|
| `mode: "development"` | disables minification, speeds up the build |
| `devtool: "source-map"` | source code in the browser for debugging |
| `devServer` | auto-reload, local server, HMR |

---

### **3. Add a command to** `package.json`

```json
"scripts": {
  "start": "webpack serve --config webpack.config.js"
}
```

Now you can run:

```bash
npm start
```

---

### **What we end up with**

After starting:

- the project is automatically built by Webpack
- a local server is started
- the page reloads on every file change
- Hot Module Replacement works (if loaders for styles and React are configured

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.