Entendendo o Webpack
Tags: webdev, webpack, javascript, node
Published: 2021-09-08 14:55:59

Quando comecei a pegar algumas tarefas de desenvolvimento para React, não entendia o que era o Webpack e qual era a sua utilidade. Após estudar sobre o assunto, achei que seria interessante fazer um artigo para compartilhar uma síntese do que aprendi.

## O que é o Webpack?
A definição mais básica: Um empacotador de módulos Javascript de código aberto{% wikipedia https://en.wikipedia.org/wiki/Webpack %}


## Mas o que é um módulo?

Nos primórdios, o JS era utilizado para criar interações simples nas páginas web. Com a chegada do Node, foi possível criar aplicações inteiras em JS. Mas com ele também surgiu a necessidade de ter uma forma de quebrar o código em várias partes. Toda vez que se é utilizado o **export** em um bloco de código, significa que está deixando aquele módulo disponível para ser utilizado com **import**. [Sobre módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Modules)
![Captura de Tela 2021-09-07 às 21.07.02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ii41pzzpv1saegm16tz.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bpqyyihr65lvnv5vuzp.png)


## Como funciona o Webpack?

No arquivo de configurações dele, você vai informar qual é o arquivo onde começa a executar o seu projeto (**Entry**) e em qual diretório você quer que ele salve o arquivo resultante (**Output**). A partir desse arquivo inicial, empacotador irá mapear todos os módulos que serão utilizados, criando assim, um grafo de dependências.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj1q3bzkmtvei66uh10v.png)


## Como ele consegue navegar pela estrutura do código?

Existe um recurso chamado AST (Abstract Structure Tree), uma representação estrutural em árvore do código, onde cada nó representa um elemento do script. Com ele é possível manipular os elementos do script adicionando e removendo os nós.
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64iypkahze7sy5oa5l30.png)


## Qual é a vantagem de se utilizar o Webpack?

Imagina que você criou um aplicação de vacinação. Nela o usuário informa a data da ultima vacinação, o tipo de vacina que tomou e qual foi a dose. Nesse exemplo, cada campo é um componente separado que é injetado no html da página. Quando a tela é carregada, o index.html chama o app.js que por sua vez importa os componentes que serão exibidos. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4i8o93igj3k8ev3xlc2.png">
  <figcaption>Um projeto simples utilizando lite-server para demonstrar quando os módulos são carregados</figcaption>
</figure>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po0gowufegmqi4numz1h.png)

Para cada componente, o client precisa fazer um requisição pedindo o módulo para o servidor e isso não é nada bom para a latência e largura da banda.

Com o Webpack, todas essas dependências estão em um único arquivo e tudo o que a aplicação precisa naquele momento já está pré-carregado.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynaxqshmqih71agu0pmw.png)
 

## É possível gerar mais de um bundler?

Sim. Ter sempre um único bundler nem sempre é vantajoso pois dependendo do tamanho da aplicação, o arquivo final pode ficar muito grande e o carregamento ficará muito lento. Se  você tem módulos que só serão utilizados após o usuário executar uma ação, então é possível utilizar o lazy loading para que o Webpack crie um bundler separado para esses módulos.


## Conclusão
O objetivo desse post era dar uma explicação simplificada de como funciona o Webpack e a vantagem de utiliza-lo. React, Angular e Vuejs já utilizam por baixo dos panos, então a princípio você não precisa se preocupar. O conceito de AST é bem interessante e tem várias aplicações como automatizar a alteração do código. O compilador Babel.js utiliza o AST para transformar o código escrito para que seja compatível com navegadores que utilizam especificações mais antigas do JavaScript.