Princípio de funcionamento do Webpack em JavaScript

Geralmente, durante o desenvolvimento, acabamos tendo 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 tornam a velocidade de carregamento do site mais lenta. Portanto, para acelerar o carregamento, é necessário colocar todo o código em um único arquivo.

No entanto, desenvolver o código em um único arquivo geral 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 empacotador, é reunido em um arquivo geral, que é vinculado ao arquivo HTML.

Os arquivos separados são 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 conectados. Este arquivo é chamado de ponto de entrada.

O empacotador 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 empacotador 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.

O empacotador também permite regular o modo de construção. O modo 'development' (p desenvolvimento) é destinado ao processo de desenvolvimento. Ele compila o código de uma forma conveniente para o desenvolvimento. O modo 'production' (produção) é destinado ao código final, que será colocado em funcionamento. Neste modo, o código será minificado, para reduzir seu tamanho e aumentar a velocidade de carregamento.