Что за Babel, Webpack, зачем их использовать и обязательно ли это?
babel - транслятор ES6+ (текущий стандарт JS + возможность добавлять драфты стандартов) в javascript (ES5). То есть возможность использовать фишки нового стандарта в старых браузерах. С одной стороны использовать его новичку было бы полезно, так как многие вещи из новых стандартов сильно упрощают код. С другой стороны есть риск по неопытности сделать плохо. Но этот риск как бы есть всегда.
webpack - бандлер. Он собирает модули в бандлы (то есть не только JS, но и картинки может в стили заинлайнить а те что сильно большие рядом положить ну и все такое). При этом может разрулить много чего и с ним реально проще жить.
Модули? Почему нельзя вручную создать директории и файлы?
Модули никакого отношения к структуре директорий не имеют. Это нужно для инкапсуляции и изоляции. Примите как аксиому что все глобальное это плохо и стоит избегать оного. Модули локализуют все в локальные области видимости. Ну и управлять зависимостями становится проще.
Гугл. Ищущему да воздастся. Все гуглить по отдельности. И что там в ES6 нового, и про babel, и про webpack (ну тут можно еще отдельно webpack + babel).