4.2. Нововведения webpack v5

Мы специально добавили эту статью и рассказали про основные изменения, ведь не все знают английский язык на уровне чтения документации. А ещё мы собрали здесь только актуальную информацию — в некоторых других источниках сведения могут быть искажены, так как от версии к версии меняются зависимости, добавляются или убираются какие-то поля.

Давайте рассмотрим следующий пример и обратим внимание на пакет clean-webpack-plugin:

result — Количество скачиваний в неделю по состоянию на 13/12/2022

Пакет имеет расширенные поля для настройки и хорошо выполняет свою функцию — удаляет файлы, которые нам мешают или создают трудности (при сборке проекта без самоочистки файлы в dist будут копиться). Но в webpack пятой версии с этой задачей справляется встроенное поле clean.

Затронем также такие нововведения, как asset: asset/resource, asset/inline и asset/source.

О настройке этого поля мы поговорим в следующем модуле, так как оно входит в одну из основных концепций — обработчики.

asset/resource заменяет устаревший file-loader — обработчик для файлов, который создаёт «под капотом» ссылки для нормальной работы шрифтов, картинок и аудиофайлов, преобразуя их в понимаемые webpack-ом модули.

Любые файлы, отличающиеся расширением от .js и .json, будут обрабатываться им независимо от размера.

asset/inline заменяет url-loader, который позволяет вставлять файлы как ссылки, если эти файлы меньше заданного размера.

Благодаря данному обработчику мы можем избавиться от одного или нескольких подгружаемых файлов (изображений и шрифтов), заинлайнив их в CSS в виде base64.

base64 — стандарт кодирования данных при помощи 64 символов из таблицы ASCII.

Пример использования в HTML-коде:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
AAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJ
TUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSg
nBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kT
Zdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5
CYII="/>

Только всё это webpack делает автоматически. Однако если файл превышает заданный вами размер или не соответствует описанным условиям, то к нему автоматически применяется обработчик asset/resource.

asset/source заменяет raw-loader — загрузчик, который позволяет импортировать любые файлы в виде строк.

На практике file-loader, raw-loader и url-loader не используются. Так зачем же они нужны в реальности и как обрабатывают файлы, отличающиеся расширениями от .js и .json.

Разберём на следующей записи:

{
  test: /\.(png|jpe?g|gif|svg|webp|ico|mp3)$/i,
    type:  'assets/resource',
    generator: {
    filename: 'assets/img/[name][ext]',
  },
},
{
  test: /\.(woff2?|eot|ttf|otf)$/i,
    type: 'assets/resource',
    generator: {
    filename: 'assets/font/[name][ext]',
  },
}

Поле test указывает на то, какие форматы будут распознаны webpack как модули. Для указания множества форматов удобнее использовать регулярные выражения. Таким образом, у нас появилась поддержка множества популярных расширений для изображений и шрифтов.

Поля generator, filename позволяют жёстко указывать, куда складывать файлы. В этой записи все изображения будут размещены в директории assets/img(font — соответственно).

Вот и все основные нововведения, которые нужно знать и уметь конфигурировать. Далее разберём, как всё это применяется на практике.