Какие конфиги frontend-сборки важно понимать?

Продвинутые темы

Основные конфиги фронтенд-сборки: бандлера (Webpack/Vite), транспайлера (Babel/tsconfig), линтера и форматтера (ESLint/Prettier) и package.json.

Основные конфиги

Бандлер (webpack.config.js / vite.config.js)

Точка входа, вывод, loaders/plugins, алиасы путей, dev-сервер, прокси, code splitting, оптимизации.

// vite.config.js
export default {
  resolve: { alias: { '@': '/src' } },
  server: { proxy: { '/api': 'http://localhost:4000' } },
};

Babel (.babelrc / babel.config.js)

Пресеты (@babel/preset-env, preset-react, preset-typescript), плагины, целевые браузеры.

TypeScript (tsconfig.json)

target, module, strict, paths (алиасы), jsx, lib.

ESLint (eslint.config.js, flat config) и Prettier (.prettierrc)

Правила линтинга и форматирования, плагины (react, import), интеграция.

package.json

Зависимости, скрипты (dev/build/test), поле type, browserslist.

PostCSS / Tailwind

Обработка CSS, автопрефиксы, конфиг Tailwind.

Прочее

.env (переменные окружения), .gitignore, .editorconfig, jest.config/vitest.config.

Зачем понимать

Настроить алиасы, прокси, переменные окружения.
Оптимизировать сборку (splitting, tree shaking).
Согласовать правила в команде (ESLint/Prettier).

Коротко для собеседования

Основные конфиги: бандлера (vite/webpack — вход, плагины, алиасы, прокси), Babel (пресеты, browserslist), tsconfig (target, strict, paths), ESLint/Prettier (правила), package.json (скрипты, зависимости), .env. Понимание нужно для настройки алиасов, прокси, оптимизаций и командных правил.