Ответ 1
Изменить: Webpack теперь поддерживает захват области в некоторых ситуациях - читайте здесь сообщение в блоге
У нас, наверное, все разные определения для этого материала, но я думаю, что плоское связывание просто означает "брать ваши модули и превращать их в один пучок" - т.е. "квартира" избыточна. Большая разница в React 16 заключается в том, что по умолчанию вы будете использовать пакет по умолчанию, вместо того, чтобы ваше приложение отвечало за объединение исходных модулей React (хотя всегда существовал готовый комплект UMD из React доступен, построенный с помощью Browserify).
Скорее, большая разница между ними - это то, что происходит на границах модуля. Способ работы webpack заключается в том, что он обертывает каждый модуль в функцию и создает пакет, который реализует загрузчик и кеш модуля. Во время выполнения каждая из этих функций модуля оценивается, в свою очередь, для заполнения кеша модуля. Эта архитектура имеет множество преимуществ - она позволяет реализовать расширенные функции, такие как разделение кода и загрузка по требованию, и замена горячего модуля (HMR).
Rollup использует другой подход - он помещает весь ваш код на один уровень (при необходимости переписывая идентификаторы, чтобы избежать конфликтов между именами переменных и т.д.). Это часто называют " область подъема". Из-за этого нет накладных расходов по каждому модулю и нет накладных расходов. Ваш пакет гарантированно будет меньше, а также будет оцениваться быстрее, потому что меньше указаний (больше информации об этом - Стоимость небольших модулей). Компромисс заключается в том, что это поведение зависит от семантики модуля ES2015, а это означает, что некоторые из расширенных функций webpack намного сложнее реализовать (например, Rollup не поддерживает разделение кода, по крайней мере, пока нет!).
Короче говоря, webpack, как правило, лучше подходит для приложений, а Rollup, как правило, лучше подходит для библиотек.
Я собрал небольшой мастерить с помощью Rollup REPL.