DEV Community

Cover image for Entendendo o Webpack
Martin Sch
Martin Sch

Posted on

Entendendo o Webpack

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

webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules.

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
Captura de Tela 2021-09-07 às 21.07.02

image

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

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

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.


Um projeto simples utilizando lite-server para demonstrar quando os módulos são carregados

image

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

É 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.

Discussion (6)

Collapse
douglasstrey profile image
Douglas Strey

Excelente artigo! Explicação ótima e muito clara. Desculpa perguntar algo meio fora do contexto mas já perguntando... qual fonte você usa no vscode? achei linda!

Collapse
nitramchips profile image
Martin Sch Author

Brigadão pelo feedback, Douglas! O tema que eu to usando no vscode é o Dracula:
marketplace.visualstudio.com/items...

Collapse
mayannaoliveira profile image
Mayanna Oliveira

Muito bom o artigo. Eu estou seguindo você. 😄

Collapse
nitramchips profile image
Martin Sch Author

Brigado, Mayanna!!

Collapse
igorraphael profile image
Igor Raphael

parabéns pelo conteúdo, é sempre bom ver brs por aqui =)

Collapse
nitramchips profile image
Martin Sch Author

Vlw, Igor! =D