📝 Изначально, это должна была быть небольшая заметка о том, как работает долгосрочное кеширование в webpack 5, но когда я ее писал, понял, что начинаю рассказывать о том, как устроена сборка и наводить порядок в терминологии, в которой многие путаются. "А почему бы и нет" - подумал я. Поэтому в этот раз поговорим про основные вещи, а в следующий раз уже про long term caching.

Упрощенно, сборка - это функция, на вход которой поступают одни файлы, а на выходе получаются другие. Но между файлами на входе и на выходе есть еще модули, точки входа, чанки и группы чанков. На самом деле, промежуточных стадий намного больше, но поговорим хотя бы об этих. Обо всем по-порядку...

Каждый файл, который используется в вашем проекте - это модуль (Module).

./a.js:

import foo from './b.js';

./b.js:

export default 123;

Используя друг-друга, модули образуют граф модулей (ModuleGraph)
Модули не существуют сами по себе, а объединяются в чанки (Chunk).
У каждого чанка есть соответствующий ему файл - ассет (Asset). Это есть выходные файлы - результат сборки.
Чанки, как и модули, образуют граф (ChunkGraph) т.к. связаны между собой через модули и тоже не существуют само по себе, а объединяются в группы (ChunkGroup).
Каждый раз, когда вы задаете точку входа в конфиге вебпака, вы создаете группу чанков с одним чанком. В этом чанке будут те модули, которые вы укажете как точку входа, это и будет отправной точкой:

./webpack.config.js:

module.exports = {
 entry: './a.js'
};

Будет создана одна группа чанков с именем main (имя точки входа по умолчанию), которая будет состоять из одного чанка, в который будет входить один модуль ./a.js. По мере того, как парсер будет обрабатывать импорты внутри ./a.js в чанк будут добавляться новые модули.
Еще пример:

./webpack.config.js:

module.exports = {
 entry: {
   home: './home.js',
   about: './about.js'
 }
};

Будет создано две группы чанков с именами home и about соответственно.
В каждой из них будет по одному чанку с одним модулем - ./home.js и ./about.js
У каждого модуля и чанка есть свой уникальный идентификатор - это важно.
Если подытожить, то сборку можно представить себе так:

files -> modules -> chunks -> assets -> files

Это та база, которую необходимо знать и не путаться.

Чанков на группу может быть и больше одного, но об этом как-нибудь в другой раз, например, когда буду подробнее писать про оптимизацию сборки в webpack.

#webpack #webpack5