Ответ
Сборщик (например, Webpack, Vite, Parcel) автоматизирует рутинные задачи и оптимизирует код для продакшена. Основные преимущества:
- Бандлинг – объединяет модули в один/несколько файлов
- Транспиляция – конвертирует современный JS (ES6+) в совместимый код через Babel
- Оптимизация – минификация, tree-shaking, сжатие изображений
- Dev-сервер – горячая перезагрузка (HMR), проксирование API
- Обработка ресурсов – импорт CSS/SCSS, шрифтов как модулей
Пример конфига Webpack:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /.js$/, use: 'babel-loader' },
{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
};Ответ 18+ 🔞
А, сборщики, ёпта! Ну это такая штука, которая за тебя всю чёрную работу делает, пока ты ковыряешь в носу и думаешь, как бы поизящнее хуйню в компонент запихнуть. Представь: у тебя куча файлов — JS, стили, картинки, хуй с горы. А браузеру подавай один, максимум два файла, и чтоб всё работало даже у тёти Зины на Windows XP с IE8. Вот сборщик и есть тот самый грустный пахан, который всех этих раздолбаев-модулей собирает в одну крепкую банду — бандл.
Что он умеет, этот волшебник?
- Бандлинг — это когда он берёт твои сто пятьсот файликов
import ... from ...и склеивает в одну здоровенную кучу, чтоб браузеру один раз скачать, а не сто пятьсот запросов слать. Иногда делает несколько кучек, если умный. - Транспиляция — ну тут без Бабеля никуда. Ты пишешь на самом современном JS, с такими
async/await, что аж жопа радуется, а сборщик через Бабель превращает это в такое старьё, которое и в древнем браузере пожуёт. Иначе — пиздец, ничего не работает. - Оптимизация — вот тут он реально красава. Он выкинет весь мёртвый код, который ты нигде не используешь (это tree-shaking, типа "отряхнуть дерево"), сожмёт имена переменных до одной буквы, картинки ужмёт так, что твоя гифка с котиком будет весить как иконка. В общем, делает из твоего бардака стройный и быстрый продакшен-бандл. Овердохуища пользы!
- Dev-сервер — а это просто песня, блядь. Запустил — и у тебя локально сайт крутится. Сохран