Основы работы с Webpack: настройка, плагины и лоадеры

Webpack – это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей. Он не ограничивается одним только фронтендом, его также успешно применяют в бэкенде разработке на Node.js. Вам достаточно указать точку входа в вашу программу (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один исходный JavaScript-файл, содержащий все необходимое для запуска программы.

Настройка Webpack на новом проекте. Команда npm init -y (или npm init –yes) используется для быстрой инициализации нового проекта Node.js в текущей папке. Она автоматически создаёт файл package.json с настройками по умолчанию, не задавая пользователю вопросов о названии проекта, версии, описании и других параметрах.

npm init -y

Установка Webpack локально или глобально

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка webpack и webpack-cli (интерфейс командной строки для Webpack) и ключом -g.

npm install -g webpack webpack-cli

Локальная установка - это рекомендуемый способ установки, поскольку webpack может обновляться в каждом проекте по отдельности и у вас возникнет меньше проблем. Локальная установка применяется в рамках конкретного проекта и сохраняет зависимости в папке node_modules и в package.json. Это лучший способ, так как позволяет использовать разные версии Webpack в разных проектах.

npm install --save-dev webpack webpack-cli

–save-dev или сокращённо -D — добавляет пакеты в devDependencies.

Настройка webpack.config.js

npm install --save-dev webpack webpack-cli mini-css-extract-plugin css-loader sass-loader sass terser-webpack-plugin css-minimizer-webpack-plugin babel-loader @babel/core @babel/preset-env

Этот конфиг:

Webpack соберёт JS из src/js/main.js в dist/bundle.js с минификацией.
SCSS из src/sass/style.scss будет скомпилирован и минифицирован в dist/styles.css.
В dist/index.html автоматически подключатся bundle.js и styles.css.
Включён вотчер для автоматической пересборки при изменениях.
Генерируются source map для удобной отладки.

Такой подход покрывает все ваши требования по сборке и оптимизации.

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  mode: 'production', // включает оптимизацию и минификацию
 
  entry: './src/js/main.js', // точка входа JS
 
  output: {
    filename: 'bundle.js', // итоговый JS
    path: path.resolve(__dirname, 'dist'),
    clean: true, // очистка dist перед сборкой
  },
 
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // если нужен транспилятор (опционально)
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, // обработка SCSS и CSS
        use: [
          MiniCssExtractPlugin.loader, // извлекает CSS в отдельный файл
          'css-loader',                // обрабатывает импорты CSS
          'sass-loader',               // компилирует SCSS в CSS
        ],
      },
    ],
  },
 
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // итоговый CSS-файл
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html', // шаблон HTML
      inject: 'body',               // подключить скрипты перед </body>
    }),
  ],
 
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),       // минификация JS
      new CssMinimizerPlugin(), // минификация CSS
    ],
  },
 
  watch: true, // вотчер — пересборка при изменениях
 
  devtool: 'source-map', // source map для удобной отладки
};

Запустите сборку командой в терминале из корня проекта:

npm run build

Эта команда запустит Webpack, который по умолчанию найдёт файл webpack.config.js в корне и выполнит сборку согласно его настройкам.

Если хотите запустить Webpack в режиме наблюдения (watch), чтобы он автоматически пересобирал проект при изменениях:

npm run watch