Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як налаштувати запуск Webpack для розробки?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Щоб налаштувати Webpack для **розробки**, потрібно увімкнути режим `development`, додати dev-server і команду запуску в `package.json`.

---

### **1. Встанови Webpack і dev-server**

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

---

### **2. Налаштуй** `webpack.config.js`

Мінімальна конфігурація для розробки:

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

module.exports = {
  mode: 'development',                 // режим розробки
  entry: './src/index.js',             // точка входу
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',               // зручне налагодження
  devServer: {
    static: path.resolve(__dirname, 'dist'), // віддаємо файли з dist
    port: 3000,                         // будь-який порт
    hot: true,                          // HMR - оновлення без перезавантаження
    open: true,                         // авто-відкриття браузера
  },
};
```

Що вмикає ця конфігурація:

| Опція | Навіщо |
|---|---|
| `mode: "development"` | вимикає мінімізацію, прискорює збірку |
| `devtool: "source-map"` | вихідний код у браузері для налагодження |
| `devServer` | автооновлення, локальний сервер, HMR |

---

### **3. Додай команду в** `package.json`

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

Тепер можна запускати:

```bash
npm start
```

---

### **Що в підсумку отримуємо**

Після запуску:

- проєкт автоматично збирається Webpack'ом
- піднімається локальний сервер
- сторінка оновлюється при кожній зміні файлів
- працює Hot Module Replacement (якщо налаштовані лоадери для стилів і React

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати200 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.