Olá, Eu não sei se entendi muito bem, tipo eu entendi que ele compila os arquivos. Mas o objetivo é organizar melhor os arquivos web? Como o navegador faz a leitura do arquivo compilado?
Eu não tenho tanto conhecimento em front-end. Mas sei usar bem HTML e CSS puro com JS. (Não sei se não entendi por falta de conhecimento ou se é pq é muito cedo ainda.)
Agradeço o comentário.
A compilação de CSS e JS é mais para uma "compressão". Você "encolhe" o código para ele ficar menor e mais portável para redes lentas.
Imagine um código que você tem 30 arquivos .js e 50 arquivos .css. Você precisa importar um por um em seus arquivos .html para eles renderizarem corretamente, ou importar um por um dentro do Javascript.
A compilação é para resolver este problema, e também reduzir o payload da conexão. Ao invés de baixar 70 arquivos, você baixa somente dois, um para o JS e um para o CSS, ambos contendo tudo o que você precisa.
De forma mais técnica, vamos supor que você contém este trecho CSS:
div.red {
background-color: red;
}
A forma comprimida do mesmo é:
div.red{background-color:red}
Removendo espaços, conteúdo desnecessário, tudo o que for possível para otimizar a transferência.
O zbundler faz isso, e como uma comodidade para o user, também compila alguns pré-processadores SCSS/SASS para CSS também.