Cover Webpack

Webpack: por que usar em seus projetos?

Neste artigo trago um pouco da história por trás das ferramentas de front-end e a razão na qual o webpack tornou-se uma ótima alternativa para apoiar na arquitetura de um front-end robusto.

Nesse grande BOOM recente de ferramentas JavaScript em que estamos vivenciando, arquitetar front-ends tem se tornado uma tarefa cada vez mais complexa em termos de escolhas de frameworks.

Não por acaso essas ferramentas foram criadas. Por muitas vezes, vemos discussões onde esse tema é até tratado com desleixo, pois até pouco tempo atrás criar uma aplicação necessitava apenas de um “jqueryzinho”, umas requisições AJAX e vez ou outra eram feitas minificações, sprites de css, gerenciamento de scripts de terceiros e por aí vai.

Com a evolução da tecnologia e a chegada dos dispositivos móveis foi dado o inicio de uma era na qual cada vez mais fora exigido das aplicações, em que estas deveriam ter o menor pacote possível ao ser entregue para o cliente (cliente entenda por dispositivo)

Ficava então a partir daquele ponto inaceitável entregar mais dados do que o necessário, sejam estes vindos do back-end, e até mesmo da camada de apresentação, era extremamente necessário otimizar as duas pontas.

O back-end fazia sua parte entregando dados em um formato mais leve (JSON) ao invés de XML (muito embora seja bastante usado ainda nos dias atuais), APIs REST começaram a se tornar cada vez mais comuns e os serviços baseados em SOAP começaram a ser menos utilizados nesse tipo de comunicação.

No front-end muita coisa foi criada, a caixa de ferramentas e possibilidades cresceu muito em um curto período de tempo, frameworks SPA, gerenciamento de pacotes, task runners, ferramentas de bundle…

Foi neste momento em que o webpack foi criado, com o objetivo de fazer com que o pacote de release fosse entregue em um tamanho muito menor.

Dependendo da forma em que for configurada a estrutura da aplicação é possível trabalhar de forma muito inteligente com o webpack e chegar no nível em que cada página carrega apenas o bundle necessário para rodar, ou seja o “preço” a se pagar pela renderização é otimizado.

Diagrama demonstrando como webpack funciona
Como webpack funciona

Conforme observado na imagem, o webpack “percorre” por toda árvore de recursos da aplicação, sejam eles um arquivo png, js, css, scss, e transforma tudo em js.

Hands On!

Primeiro, devemos instalar o webpack globalmente

Vamos criar dois arquivos na raíz da nossa aplicação: app.js e index.html.

App.js

Index.html

Vamos definir também um arquivo de configuração na raíz do nosso projeto, vamos dar o nome de webpack.config.js

webpack.config.js:

Execute o prompt de comando na pasta raíz o comando
> webpack

O entry é a definição do arquivo principal em nosso build, ou seja por onde o webpack irá começar a montar a árvore de dependências.

output é um objeto contendo as configurações de saída do build, no caso o nosso bundle.js

Concluímos então que nossas aplicações geralmente possuem dependências entre componentes, o webpack precisa de um ponto de entrada para analisar toda a árvore de dependências e as resolve somente na primeira vez o que o torna muito interessante entregando somente o necessário para o browser.

Referências
https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460

https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460

 

Leave a Reply

Your email address will not be published. Required fields are marked *