O que é e Quais as Funções do Webpack?

06-12-2022

O que é, Quais, Funções, Webpack

As áreas de TI (Tecnologias de Informação) são muito dinâmicas, sofrem variadas alterações e trazem constantes desafios aos profissionais desta área. Essas alterações fazem com que apareçam várias ferramentas que possibilitem (ou tentem) facilitar processos pesados e repetitivos, que todos os programadores gostam de ver agilizados e que evitam erros comuns desnecessários.

O Webpack é um desses recursos hoje em dia muito utilizados para melhorar e otimizar as tarefas de construção de um projeto web, baseados numa linguagem javascript moderna e onde todos os seus ativos, sejam eles ficheiros javascript, css's, imagens ou fontes irão ser geridos, agrupados e empacotados, de uma forma simples em poucos ficheiros.

Sendo usada em programação modular, onde as funcionalidade estão obrigatoriamente bem separadas uma das outras e divididas em módulos estáticos, este recurso vai ser capaz de pegar nesses módulos, que não são mais do que várias partes javascript, transforma-las e empacota-las, criando um gráfico de dependências, capaz de mapear esses módulos dando origem a um ou a poucos ficheiros. De uma forma resumida o Webpack agarra num grande número de ficheiros e transforma-os num número muito mais reduzido.

Geralmente o programador não tem muito contacto direto com esta ferramenta, uma vez que ela está intrínseca em bibliotecas muito usadas, como o Angular, React, Vue, etc., que já a usam deixando o Webpack transparente para quem as usa. A sua configuração é feita geralmente dentro de um único ficheiro e conforme as necessidades, essa configuração pode ser mais ou menos complexa, sendo muito comum esse ficheiro ser o mais simples possível.

Dentro do ficheiro de configuração, coloca-se um conjunto de propriedades que vão ser lidas pelo recurso do webpack e uma delas descreve o ponto de entrada da aplicação, isto é, o caminho do ficheiro (e que até pode ser um ficheiro HTML) onde se encontra o script que inicia toda a aplicação. O que o Webpack faz é a partir desse ponto de entrada analisar e agrupar todos os ficheiros associados direta ou indiretamente a ele e gerar um único ponto de saída que será um ficheiro javascript com um ou outros (poucos) ficheiros associados.

Principais Conceitos

1. Entry

Define o ponto de partida, isto é, qual módulo (pedaço de javascript) que inícia a construção do gráfico de dependências. Definido esse ponto, o programa já consegue encontrar todas as dependências e fazer a importação. Por padrão é definido no arquivo "/src/index.js".

2. Output

Define o ponto onde o pacote final gerado pode ser encontrado. Por padrão é definido como directoria "/dist".

3. Loaders

São usados para que o Webpack possa saber interpretar ficheiros diferentes de javascript. Os Loaders são módulos instalados separadamente para que o webpack saiba converter determinados ficheiros em módulos válidos e os possa adicionar ao gráfico de dependências. Eles também são utilizados para converter diferentes versões de javascript.