📝 Чем хорош свой телеграм-канал, так это свободой формата. Подумал о том, что можно (и даже нужно) накинуть еще "базы" по тому, как устроена сборка, из чего она состоит.

В прошлом посте мы выяснили, что точки входа превращаются в чанки, а те в ассеты (выходные файлы).

Так же надо отметить, что чанки бывают двух видов - initial и non-initial

initial чанк - это основной чанк точки входа, тот самый чанк, в который "упаковываются" те модули (и их подмодули), которые вы указываете, когда описываете точку входа.

non-initial чанк - это все остальные чанки (спасибо кэп!).
non-initlal чанк может появиться, например, в следствии использования динамического импорта:

webpack.config.js

module.exports = {
 entry: './src/index.jsx'
}

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const App = await import('./app.jsx');

ReactDOM.render(<App />, root);

Здесь будет создан initial чанк с именем main, в него будут входить:
- ./src/index.jsx
- react
- react-dom

и все их подмодули, кроме ./app.jsx

Т.к. ./app.jsx был импортирован динамически, для него будет создан отдельный non-initial чанк, куда и будет помещен сам ./app.jsx с его подмодулями. То есть на выходе мы получим что-то вроде:

- /dist/main.js - initial чанк
- /dist/394.js - non-initial чанк

У non-initial чанков по умолчанию нет собственного имени, поэтому вместо имени будет использован их уникальный идентификатор. В случае с динамическим импортом мы можем явно указать имя для чанка при помощи "магического" комментария:

const app = await import(
  /* webpackChunkName: "app" */
  './app'
);

На выходе получим:

- /dist/main.js - initial чанк
- /dist/app.js - non-initial чанк

Так же non-initial чанки могут появляться в результате использования SplitChunkPlugin, но об этом как-нибудь в другой раз.

На имена выходных файлов влияют два поля в конфиге:

output.filename - имена файлов для initial чанков
output.chunkFilename - имена файлов для non-initial чанков

В этих полях можно использовать плейсхолдеры, чаще всего эти:

- [id] - идентификатор чанка. Например [id].js -> 485.js
- [name] - имя чанка. Например [name].js -> app.js
- [contenthash] - md4-хеш от контента выходного файла. Например [contenthash].js -> 4ea6ff1de66c537eb9b2.js

#webpack