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
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.
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.
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.
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.
É 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.
Latest comments (6)
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!
Brigadão pelo feedback, Douglas! O tema que eu to usando no vscode é o Dracula:
marketplace.visualstudio.com/items...
Muito bom o artigo. Eu estou seguindo você. 😄
Brigado, Mayanna!!
parabéns pelo conteúdo, é sempre bom ver brs por aqui =)
Vlw, Igor! =D