2. Установка и базовая конфигурация

Настройка Webpack с нуля — важный навык для любого фронтенд-разработчика. Понимание каждого шага установки помогает разобраться в том, как работает сборщик, и избежать типичных ошибок в реальных проектах.

Шаг 1 — Инициализация проекта

mkdir my-webpack-app
cd my-webpack-app
npm init -y

После этого в папке появится package.json. Флаг -y отвечает на все вопросы утвердительно.

Шаг 2 — Установка Webpack

# Основные пакеты (всегда в devDependencies)
npm install --save-dev webpack webpack-cli

# Проверка версий
npx webpack --version
# webpack: 5.x.x
# webpack-cli: 5.x.x

Важно: Webpack устанавливается только в devDependencies — он нужен только для сборки, не для runtime.

Шаг 3 — Структура проекта

my-webpack-app/
├── src/
│   ├── index.js       ← точка входа
│   └── utils.js
├── public/
│   └── index.html     ← HTML шаблон
├── dist/              ← сюда Webpack пишет бандлы (создаётся автоматически)
├── webpack.config.js  ← конфиг Webpack
└── package.json

Шаг 4 — webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Режим сборки
  mode: 'development',

  // Точка входа
  entry: './src/index.js',

  // Настройки вывода
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true, // Очищать dist перед каждой сборкой (Webpack 5)
  },

  // Плагины
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  // Source maps для удобной отладки
  devtool: 'eval-source-map',
};

Шаг 5 — npm scripts

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "build:prod": "webpack --config webpack.config.js --mode production",
    "watch": "webpack --watch",
    "dev": "webpack serve --open"
  }
}

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

npm run build

Что значит path.resolve(__dirname, 'dist')?

• __dirname — абсолютный путь до директории текущего файла (webpack.config.js)
• path.resolve() — создаёт абсолютный путь, объединяя сегменты
• Результат: /home/user/projects/my-app/dist

Webpack всегда ожидает абсолютные пути для output.path — именно поэтому нельзя написать просто './dist'.

Опциональные пакеты для старта

# Dev сервер с HMR
npm install --save-dev webpack-dev-server

# HTML плагин
npm install --save-dev html-webpack-plugin

# Babel для ES6+ и React
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

# TypeScript
npm install --save-dev typescript ts-loader

Ниже — интерактивный конструктор начальной конфигурации Webpack. Включайте/выключайте опции и смотрите как меняется webpack.config.js.