Ух.
Начну с простого. Когда-то для работы с "фронтендом" хватало одного небольшого файлика, который подключался к сайту и делал какую-то минимальную анимацию на сайте (тогда он использовался только для этого).
Затем, появилась библиотека JQuery и стало легче работать с клиентской стороной сайта. Появились новые возможности, к библиотеки начали дополнительно подключать пару-тройку плагинов. Все еще легко.
Потом появились другие библиотеки. Их стало много. И подключать каждый файлик отдельно стало неудобно. Захотелось автоматизировать процессы подключения новых файлов в проект, загрузку их из интернета. Появились бандлеры (для первого) и пакетные менеджеры (для второго). Также, появилась потребность, в момент разработки автоматически перезагружать окно браузера, чтобы проверить внесенные изменения, а также подготавливать проекты к релизу. Появились таск менеджеры. Плюс, необходимо было запускать тесты, чтобы проверить, что все работает правильно. И, наконец, нужна была система контроля версий, чтобы удобно выкатывать изменения, хранить состояния кода в разные моменты времени и так далее. А еще, появился новый синтаксис языка, который содержит новые удобные инструменты, но которые не поддерживаются старыми браузерами, для выполнения этой задачи нужны транспайлеры.
Вот все вот эти инструменты и составляют, в основном, окружение фронтенда. Они помогают упростить рутинную работу, автоматизировать все процессы, которые происходят во все моменты работы над приложением, его публикацией, версионированием и так далее. Возможно, настройка этого окружения требует времени и определенных знаний, но то время, которое экономится - бесценно.
На начальных этапах, уже есть готовые шаблоны. К примеру, когда работаешь над Vue.js проектом, ты вполне можешь использовать vue-cli шаблон webpack-simple, который включает все те пункты, которые я перечислил. Как-то так.
