Princípio de funcionamento do Webpack

Geralmente, durante o desenvolvimento, temos muitos arquivos JavaScript, contendo vários pedaços de código. Estes podem ser partes do nosso código, ou bibliotecas de terceiros. Isso significa que cada um desses arquivos precisa ser vinculado ao arquivo HTML através da tag script.

Isso não é muito bom, pois muitos arquivos vinculados diminuem a velocidade de carregamento do site. Portanto, para acelerar o carregamento, é necessário juntar todo o código em um único arquivo.

No entanto, desenvolver código em um único arquivo também não é muito conveniente. Por isso, atualmente, adota-se a seguinte abordagem: o código é desenvolvido em arquivos separados e, em seguida, com a ajuda de um bundler, é reunido em um arquivo geral, que é vinculado ao arquivo HTML.

Os arquivos separados representam Módulos ES. Esses módulos são vinculados a outros arquivos através do comando import.

Geralmente, cria-se um arquivo principal, ao qual os demais arquivos são vinculados. Este arquivo é chamado de ponto de entrada.

O bundler acessa o ponto de entrada, verifica quais módulos estão vinculados a ele. A esses módulos, outros módulos também podem estar vinculados. O bundler segue todas as conexões e reúne todo o código em um único arquivo. Este arquivo é chamado de bundle (pacote).

Geralmente, o código escrito pelo programador está localizado na pasta src, e o código compilado é colocado na pasta dist.