Под капотом

Этот раздел описывает внутреннее устройство webpack и может быть полезен разработчикам плагинов.

Файлы объединяются в функцию, которая принимает некоторые файлы и выдает другие.

Но между входом и выходом также есть модули, точки входа, чанки, группы чанков и многие другие промежуточные части.

Основные части

Каждый файл, используемый в вашем проекте, — это модуль

./index.js

%%%CODE_BLOCK_0%%>

./app.js

%%%CODE_BLOCK_1%%>

Используя друг друга, модули образуют граф (ModuleGraph).

Во время процесса объединения модули объединяются в чанки. Чанки объединяются в группы чанков и образуют граф (ChunkGraph) взаимосвязанных через модули. Когда вы описываете точку входа, под капотом вы создаете группу чанков с одним чанком.

./webpack.config.js

%%%CODE_BLOCK_4%%>

Создана одна группа чанков с именем main. (main — это имя по умолчанию для точки входа). Эта группа чанков содержит ./index.js модуль. По мере обработки парсером импортов внутри ./index.js в эту группу добавляются новые модули.

Другой пример:

./webpack.config.js

%%%CODE_BLOCK_9%%>

Созданы две группы чанков с именами home и about. Каждая из них имеет чанк с модулем — ./home.js для home и ./about.js для about.

В группе чанков может быть более одного чанка. Например, SplitChunksPlugin разбивает чанк на один или несколько чанков.

Чанки

Чанки бывают двух типов:

• initial — это главный чанк для точки входа. Этот чанк содержит все модули и их зависимости, которые вы указываете для точки входа.
• non-initial — это чанк, который может быть загружен лениво. Он может появиться при использовании динамического импорта или SplitChunksPlugin.

Каждый чанк имеет соответствующий результат. Результаты — это выходные файлы — результат объединения.

webpack.config.js

%%%CODE_BLOCK_18%%>

./src/index.jsx

%%%CODE_BLOCK_19%%>

Создан начальный чанк с именем main. Он содержит:

• ./src/index.jsx
• react
• react-dom

и все их зависимости, кроме ./app.jsx

Создан неначальный чанк для ./app.jsx, так как этот модуль импортируется динамически.

Вывод:

• /dist/main.js — это чанк initial
• /dist/394.js — это чанк non-initial

По умолчанию у чанков без имени используется уникальный идентификатор вместо имени. При использовании динамического импорта мы можем явно указать имя чанка, используя «магический» комментарий:

%%%CODE_BLOCK_31%%>

Вывод:

• /dist/main.js — это чанк initial
• /dist/app.js — это чанк non-initial

Вывод

Имена выходных файлов зависят от двух полей в конфигурации:

• output.filename — для файлов чанков initial
• output.chunkFilename — для файлов чанков non-initial
• В некоторых случаях чанки используются initial и non-initial. В этих случаях используется output.filename.

В этих полях доступны несколько плейсхолдеров. Чаще всего:

• [id] — идентификатор чанка (например, [id].js —> 485.js)
• [name] — имя чанка (например, [name].js —> app.js). Если чанк не имеет имени, используется его идентификатор
• [contenthash] — md4-хеш содержимого выходного файла (например, [contenthash].js —> 4ea6ff1de66c537eb9b2.js)