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
- Primeiro, incluir um script para cada funcionalidade; É difícil dimensionar essa solução, pois carregar muitos scripts pode causar um gargalo no site.
- 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!
