Skip to main content

Як налаштувати запуск Webpack для розробки?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Щоб налаштувати 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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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