4.1. Выход из приложения по окончанию разработки. Output

В этом разделе мы плавно подобрались к двум взаимосвязанным концепциям: output и loaders, то есть точке выхода и обработчикам.

Webpack — это бандлер. Из множества файлов HTML, CSS и JS он собирает один (или несколько — зависит от условий), а затем кладёт в определённое место. Часто таким местом оказывается директория dist.

dist — общепринятое название.

Управлять поведением webpack на сборке проекта помогает поле output. Оно сообщает сборщику, где и как хранить файлы, появляющиеся в результате сборки проекта. У этого поля не так много опций, которые были бы для нас интересны. Тем не менее оно обязательно для нормальной работы webpack.

path

Первое поле — path. Оно отвечает за путь (название) к директории, которая будет создана после сборки проекта. Для конфигурации этого поля разработчики используют следующую запись:

output: {
  path: path.resolve(__dirname, '../dist'),
}

В переменной path мы подключаем библиотеку Node.js, чтобы получить доступ к файловой системе. А path.resolve преобразует пути в абсолютные.

Подключается переменная так:

const path = require("path");

filename

Поле filename отвечает, за то, в какую директорию будет ложиться JS-файл (при некоторых оптимизациях их может быть несколько). В коде это выглядит так:

filename: "js/[name].[contenthash].js";

Эта запись означает, что в директории dist будет создана директория с именем js, куда будут «ложиться» наши скрипты.

Name означает, что имя файла будет взято от исходного. То есть если во входной точке вы указали index.js и создали одноимённый файл в директории src, то на выходе имя файла останется почти тем же. Добавится только хеш — подробнее о нём мы поговорим, когда будем разбирать кеширование изменений.

clean

Следующее поле — clean. Раньше этому полю предшествовал целый плагин (пакет), который выполнял одну простую функцию: при повторной сборке приложения старые файлы удалялись. Если же разработчики не устанавливали плагин, файлы копились либо конфликтовали друг с другом. Но с выходом webpack v5 эта функция стала доступна «из коробки».

У данного поля есть несколько параметров, которые мы сейчас рассмотрим на основе готового поля output.

output: {
  path: path.resolve(__dirname, './dist'),
    filename:'js/[name].[contenthash].js',
    clean: {
    dry: false,
    keep: /\assets/,
  }
}

Большую часть из этих настроек мы уже рассмотрели. Давайте поговорим о том, что будет удаляться динамически при каждой сборке.

сlean: true — опция будет удалять всё содержимое директории dist при пересборке проекта.

Поле dry указывает webpack-у на то, что следует удалить, но лишь после того, как это перестанет использоваться — например, картинку.

Поле keep указывает на то, что нельзя удалять.

Поле clean принимает колбэки, поэтому мы можем точечно указывать ему, какие файлы будут удалены.