Какой опыт работы с webpack, включая настройку и добавление плагинов

Что проверяют

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

Как отвечать

Сначала разведите понятия:

• loader: преобразует отдельный файл при импорте (babel-loader, ts-loader, css-loader). Цепочка в use применяется справа налево, поэтому style-loader или MiniCssExtractPlugin.loader стоит первым в массиве;
• плагин: вмешивается в сборку целиком через хуки компилятора: генерирует HTML (HtmlWebpackPlugin), выносит CSS в файлы (MiniCssExtractPlugin), подставляет константы (DefinePlugin);
• asset modules: в webpack 5 type: 'asset/resource' и type: 'asset' заменили file-loader и url-loader.

Дальше расскажите, что вы оптимизировали. В mode: 'production' минификация JS через TerserPlugin включена по умолчанию. Для CSS нужен CssMinimizerPlugin, и если переопределяете optimization.minimizer, добавьте в массив '...', иначе Terser пропадёт. Долгосрочное кэширование держится на [contenthash] в именах файлов и splitChunks, который выносит вендоров в отдельный чанк. Ленивая загрузка через динамический import(). Для анализа размера webpack-bundle-analyzer, для ускорения повторных сборок cache: { type: 'filesystem' }.

Свой плагин это класс с методом apply(compiler), который подписывается на хуки вроде compiler.hooks.emit или compilation.hooks.processAssets. Даже простой пример показывает, что вы понимаете модель.

Уместно упомянуть, что новые проекты часто стартуют на Vite или Rspack, а webpack остаётся в крупных кодовых базах и там, где завязаны на его плагины и Module Federation.

Где спотыкаются

Называют плагины времён webpack 4: OptimizeCSSAssetsPlugin в пятой версии заменён на CssMinimizerPlugin, а file-loader и url-loader на asset modules.

Путают хэши в именах: с [fullhash] или [chunkhash] вместо [contenthash] правка одного CSS меняет имена других файлов, и пользователи заново скачивают всё.

Не могут объяснить, откуда в бандле лишние сотни килобайт: не смотрели анализатор, не знают про tree shaking и поле sideEffects в package.json.