4

Por que usar o Webpack?

1519Pontos

hace 2 años

Curso de Webpack
Curso de Webpack

Curso de Webpack

Melhore sua experiência como desenvolvedor tendo um código legível, organizado e simples para trabalhar com o Webpack, uma tecnologia que ajuda a empacotar JavaScript e ativos de qualquer tipo para transformá-los em algo que o navegador possa interpretar.

Para entender por que você deve usar o webpack, vamos recapitular como usavamos o JavaScript na web antes dos empacotadores.

Existem duas maneiras de executar o JavaScript em um navegador

  1. Primeiro, incluir um script para cada funcionalidade; É difícil dimensionar essa solução, pois carregar muitos scripts pode causar um gargalo no site.
  2. A segunda opção é usar um grande arquivo .js contendo todo o código do seu projeto, mas isso leva a problemas de escopo, tamanho, legibilidade e facilidade de manutenção.

Se você precisar concatenar ou combinar com segurança os arquivos sem se preocupar com a colisão do escopo aí que entra o empacotador, neste caso, webpack, prazer.

Make, Gulp, Grunt, Broccoli ou Brunch são ferramentas conhecidas como executores de tarefas e concatenam todos os arquivos do seu projeto juntos.

No entanto, alterar um arquivo significa que você deve reconstruir tudo. A concatenação facilita a reutilização de scripts entre arquivos, mas torna as otimizações de construção mais difíceis. Como você pode descobrir se o código está realmente sendo usado ou não?

Mesmo se você usar apenas uma única função do lodash, precisará adicionar a biblioteca inteira e agrupá-la. Como você elimina as dependências do seu código? Há pedaços de código de carregamento que podem ser difíceis de serem executados em escala e exigem muito trabalho manual do desenvolvedor.

O nascimento dos módulos JavaScript aconteceu graças ao Node.js

O webpack é executado no Node.js, um JavaScript runtime (tempo de execução) que pode ser usado em computadores e servidores fora de um ambiente de navegador.

Quando o Node.js foi lançado, uma nova era começou e trouxe novos desafios. Agora que o JavaScript não está sendo executado em um navegador, como os aplicativos Node devem carregar novos blocos de código? Não há arquivos html e tags de script que possam ser adicionados a ele.

O CommonJS foi lançado e apresentou o require, que permite carregar e usar um módulo no arquivo atual. Este problema de escopo resolvido fora da caixa importando cada módulo conforme necessário.

Coleta automática de dependências: os executores “old school” e até o Google Closure Compiler exigem que você declare manualmente todas as dependências antecipadamente. Enquanto empacotadores como o webpack criam e inferem automaticamente suas dependências com base no que é importado e exportado. Isso, juntamente com outros plugins e carregadores, cria uma ótima experiência para o desenvolvedor.

Não seria legal ter algo que não apenas nos permita escrever módulos, mas também suporte qualquer formato de módulo (pelo menos até chegarmos ao ESM) e manipular recursos e ativos ao mesmo tempo?

É por isso que o webpack existe. É uma ferramenta que permite agrupar seus aplicativos JavaScript (com suporte para ESM e CommonJS) e pode ser estendida para suportar muitos ativos diferentes, como imagens, fontes e folhas de estilo.

O webpack, por fim, se preocupa com o desempenho e o tempo de carregamento; está sempre aprimorando ou adicionando novos recursos, como carregamento e pré-busca de partes assíncronas, para oferecer a melhor experiência possível para seu projeto e seus usuários.

Não perca tempo e comece agora aprender Webpack com a Platzi. Te vejo no curso!

Curso de Webpack
Curso de Webpack

Curso de Webpack

Melhore sua experiência como desenvolvedor tendo um código legível, organizado e simples para trabalhar com o Webpack, uma tecnologia que ajuda a empacotar JavaScript e ativos de qualquer tipo para transformá-los em algo que o navegador possa interpretar.
Thiago
Thiago
Escreva o seu comentário
+ 2