3. Entry, Output и контекст

Две самые фундаментальные настройки Webpack — entry и output. Они определяют откуда Webpack начинает сборку и куда записывает результат. Понимание всех вариантов конфигурации этих полей открывает возможности для создания сложных multi-page или multi-bundle приложений.

Entry — точка входа

Строка (простейший вариант)

module.exports = {
  entry: './src/index.js',
};
// Webpack создаст один чанк с именем 'main'

Массив — несколько файлов в один бандл

module.exports = {
  entry: ['./src/polyfills.js', './src/index.js'],
};
// Оба файла попадут в один бандл 'main'
// Используется для добавления polyfills

Объект — множество точек входа

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin/index.js',
    vendor: ['react', 'react-dom'],
  },
};
// Создаст main.js, admin.js, vendor.js

Динамический entry с функцией

module.exports = {
  entry: () => new Promise((resolve) => {
    resolve({
      main: './src/index.js',
      admin: './src/admin.js',
    });
  }),
};

Entry дескриптор (Webpack 5)

module.exports = {
  entry: {
    main: {
      import: './src/index.js',
      dependOn: 'shared',         // зависит от shared чанка
      filename: 'pages/[name].js', // кастомный путь вывода
    },
    shared: ['react', 'react-dom'],
  },
};

Output — настройки вывода

Базовые настройки

output: {
  path: path.resolve(__dirname, 'dist'), // абсолютный путь!
  filename: 'bundle.js',                  // для одного entry
  filename: '[name].bundle.js',           // для множества entry
  publicPath: '/',                        // базовый URL для ресурсов
  clean: true,                            // очищать dist/ (Webpack 5)
}

Шаблонные строки (Template Strings)

Паттерн	Описание	Пример
[name]	Имя чанка/entry	main
[id]	Числовой ID чанка	0
[hash]	Хеш всей сборки	abc123
[chunkhash]	Хеш конкретного чанка	def456
[contenthash]	Хеш содержимого файла	ghi789
[ext]	Расширение файла	.js
[query]	Строка запроса	?v=1

Рекомендованная конфигурация для production

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[contenthash:8].js',   // JS бандлы
  chunkFilename: '[id].[contenthash:8].js', // lazy-loaded чанки
  assetModuleFilename: 'assets/[hash][ext]', // ресурсы
  publicPath: 'https://cdn.example.com/',   // CDN URL
  clean: true,
}

publicPath — важная настройка

publicPath определяет базовый URL, по которому браузер будет загружать ресурсы:

// Для SPA с React Router на корневом пути
publicPath: '/'

// Для приложения на поддомене
publicPath: '/app/'

// Для CDN
publicPath: 'https://cdn.example.com/assets/'

// Автоматически (Webpack 5)
publicPath: 'auto'

context — базовая директория

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.js', // относительно context, т.е. src/index.js
};

Ниже — интерактивный конфигуратор Entry и Output. Выбирайте тип entry и параметры output, чтобы увидеть готовый конфиг.