Что такое Webpack?

Webpack

Webpack — это статический сборщик модулей для современных JavaScript приложений. Он анализирует зависимости проекта и создает один или несколько бандлов.

Основные концепции Webpack

• Entry — точка входа в приложение
• Output — куда и как выводить собранные файлы
• Loaders — преобразователи для различных типов файлов
• Plugins — расширения функциональности
• Mode — режим сборки (development/production)

Популярные Loaders

• babel-loader — транспиляция ES6+ в ES5
• css-loader — обработка CSS файлов
• file-loader — обработка файлов (изображения, шрифты)
• sass-loader — компиляция Sass/SCSS
• ts-loader — компиляция TypeScript

Полезные Plugins

• HtmlWebpackPlugin — генерация HTML файлов
• MiniCssExtractPlugin — извлечение CSS в отдельные файлы
• CleanWebpackPlugin — очистка папки сборки
• DefinePlugin — определение глобальных переменных

Пример конфигурации

 1const path = require('path');
 2
 3module.exports = {
 4  entry: './src/index.js',
 5  output: {
 6    path: path.resolve(__dirname, 'dist'),
 7    filename: 'bundle.js'
 8  },
 9  module: {
10    rules: [
11      {
12        test: /\.css$/,
13        use: ['style-loader', 'css-loader']
14      },
15      {
16        test: /\.js$/,
17        exclude: /node_modules/,
18        use: 'babel-loader'
19      }
20    ]
21  }
22};

Установка и настройка

1# Установка Webpack через npm
2npm install --save-dev webpack webpack-cli
3
4# Установка через yarn
5yarn add --dev webpack webpack-cli
6
7# Для проектов с Poetry (через npm)
8npm install webpack webpack-cli

Команды для работы

 1# Сборка проекта
 2npx webpack
 3
 4# Сборка в режиме разработки
 5npx webpack --mode development
 6
 7# Сборка в production режиме
 8npx webpack --mode production
 9
10# Запуск dev-server
11npx webpack serve

FAQ

Зачем нужен Webpack, если есть другие сборщики?

Webpack предоставляет мощную систему плагинов и лоадеров, поддержку code splitting и hot module replacement.

В чем разница между Webpack и Vite?

Vite быстрее в разработке благодаря ES-модулям, но Webpack более гибкий и имеет богатую экосистему плагинов.