во всех видео и статьях рассказывается, про единый файл app.js неужели один файл нужно прикреплять вообще на все страницы сайта и этот монстр будет по id или вызову компонентов понимать
Или происходит сборка под каждую сложную сущность?
Зависит от того, как настроите, но я бы сделал 1 директорию под 1 страницу, в ней находится html и js именно для этой страницы, в нее импортируются общие js библиотеки, общий js для страницы нужен для того, чтобы прописать логику именно под эту страницу. Правильно настроенный сборщик самостоятельно сгенерирует и подключит js файлы, необходимые для каждой страницы. Аналогично и по css.
project/
- home/
-- home.html <-- подключение home.js/scss и библиотек (если они не требуют кастомной настроки)
-- home.js <-- импорт js библиотек и кастомная настройка именно под страницу home
-- home.scss <-- импорт scss библиотек и кастомная настройка именно под страницу home
- catalog/
-- catalog.html <-- подключение catalog.js/scss и библиотек (если они не требуют кастомной настроки)
-- catalog.js <-- импорт js библиотек и кастомная настройка именно под страницу catalog
-- catalog.scss <-- импорт scss библиотек и кастомная настройка именно под страницу
- libs/
-- popup.js
-- form.js
на выходе примерно такое:
dist/
- home.html <-- подключено main.js/css + home.js/css
- catalog.html <-- подключено main.js/css + catalog.js/css
- assests/
-- main.js <-- общие
-- main.css <-- общие
-- home.js
-- home.css
-- catalog.js
-- catalog.css
