Ответ 1
По сути, они служат разным целям и обычно появляются вместе. Я объясню, для чего они предназначены.
столпотворение
Бабель - трейлер. Он может переводить все виды высокопроизводительных ECMAScript (не только ECMAScript, но и легко понять) в ES5, который более широко поддерживается браузерами (особенно старыми версиями). Его основная задача - превратить неподдерживаемые или самые современные языковые функции в ES5.
Webpack
Webpack - это, помимо прочего, анализатор зависимостей и пакетный модуль. Например, если модуль A требует B в качестве зависимости, а модуль B требует C в качестве зависимости, тогда webpack сгенерирует карту зависимостей, подобную C → B → A. На практике это намного сложнее, чем это, но общее Концепция заключается в том, что Webpack упаковывает модули со сложными зависимостями в пакеты. Относительно отношений webpack с babel: когда webpack обрабатывает зависимости, он должен все превратить в javascript, потому что webpack работает поверх javascript. В результате он использует разные загрузчики для перевода различных типов ресурсов/кода в javascript. Когда нам нужны функции ES6 или ES7, мы используем babel-loader для этого.
реагировать-скрипт
Когда мы начинаем проект, основанный на реакции, настройка среды сборки - сложная и трудоемкая работа. Чтобы помочь с этим, разработчики React создали пакет npm под названием react-scripts, который включает в себя множество основных настроек, которые понадобятся большинству людей для обычного приложения React. Babel и веб-пакет включены как зависимости в react-scripts