8.1. Отличия webpack v4 и webpack v5

В этой статье мы поговорим о ключевых отличиях двух версий webpack: старой четвёртой и новой пятой.

Webpack v5 является инкрементальной версией по сравнению с v4.

В этом контексте «инкрементальный» означает, что webpack v5 является новой версией, которая добавляет к старой дополнительные функции и улучшения, но при этом не меняет основную структуру и архитектуру. Приложения, созданные с помощью предыдущей версии, можно легко обновить до новой, используя существующий код и конфигурацию.

В новой версии улучшены производительность и оптимизация размера бандла — то есть файлов на выходе. Введение ModuleFederationPlugin позволяет легче делиться кодом между проектами, основанными на webpack, а встроенный CLI (консольная утилита) упрощает запуск. Кроме того, режимы разработки и производства объединены и автоматически настраиваются в зависимости от окружения.

Основные отличия

Функция	webpack v4	webpack v5
Размер бандла	Размер бандла по умолчанию не оптимизирован, необходимо использовать плагины.	Размер бандла оптимизирован по умолчанию с помощью таких техник, как Tree Shaking и Module Federation.
Экосистема	Использует традиционные загрузчики для обработки активов.	Использует правила webpack для обработки активов с введением ModuleFederationPlugin.
Режимы	Разработка и производство разделены, нужно настраивать их отдельно.	Разработка и производство объединены и автоматически настраиваются в зависимости от окружения.
CLI	Необходим CLI для запуска webpack.	CLI встроен и может запускаться с помощью npx webpack или npm run build.
Производительность	Улучшена с использованием кэширования и параллельной обработки.	Дополнительное улучшение производительности с введением AssetModule и PerformanceBudget.
Разделение кода	Динамические import().	Динамические import() и import.meta.webpack.
Кэширование сборки	Нет встроенной поддержки.	Встроенная поддержка с опцией --cache.
Генерация манифеста	Нет встроенной поддержки.	Встроенная поддержка с плагином ManifestPlugin.
Долгосрочное кэширование	Нет встроенной поддержки.	Имена файлов с хэшем и хэшем содержимого.
Поддержка WebAssembly	Нет встроенной поддержки.	Встроенная поддержка с плагином WebAssemblyModulesPlugin.
Node.js API	Нет встроенной поддержки.	Встроенная поддержка с Node.js API для компиляции.

У webpack v5 есть дополнительные функции, которые могут быть полезны при разработке и сборке проектов. Добавлена поддержка кэширования сборки, манифеста, долгосрочного кэширования, WebAssembly и Node.js API. Также v5 поддерживает разделение кода с помощью динамических import() и import.meta.webpack, которые позволяют более эффективно разделять код и улучшать производительность.

«Встроенная поддержка с Node.js API для компиляции» означает, что webpack v5 имеет встроенный API, который может быть использован для компиляции и сборки проектов с использованием платформы Node.js. Это позволяет нам использовать webpack не только из командной строки, но и прямо из кода приложения. Мы можем автоматизировать и интегрировать его в существующую систему сборки. А ещё можно использовать webpack внутри серверных приложений или других скриптов Node.js.

На примере с кодом часть вышесказанного может выглядеть так.

• webpack v4:

const webpack = require('webpack');
const config = {
  entry: './src/index.js', // входная точка
  output: {
    path: __dirname + '/dist', // папка, куда будут помещаться все файлы после сборки
    filename: 'bundle.js' // имя файла после сборки
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // разделение на чанки (CodeSplitting)
    })
  ]
};
module.exports = config;

• webpack v5:

const webpack = require('webpack');
const config = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common'
    }
  }
};
module.exports = config;

В этом примере в webpack v4 используется плагин CommonsChunkPlugin для создания сплит-чанка и назначения ему имени common. В webpack v5 мы используем опцию optimization.splitChunks для создания сплит-чанка. В ней указываем chunks: 'all' для разделения всех чанков и назначаем имя common. Также в v5 убрали некоторые плагины, которые использовались в v4 для минификации файлов, и заменили их на опции оптимизации.

Если вы хотите ознакомиться с дополнительными отличиями, вот официальные и наиболее актуальные источники: webpack v4 и  webpack v5.