Já não tem mais dúvidas. Para tooling em javascript, é indispensável conhecer o Webpack. O lado bom é que com uma ferramenta só, você consegue resolver praticamente todos os problemas de tooling: babel, minificação, scss para css, loading de imagens, etc. O lado ruim é que ele é bem difícil para entender em sua totalidade. Mas vamos aos poucos tentando desbravar isso, certo?
Então essa é uma série de posts que eu vou falar um pouquinho sobre algumas funcionalidades interessantes. Mas hoje vamos começar pelo básico.
O Básico de Webpack
Para saber o mínimo de Webpack, é necessário conhecer pelo menos 4 conceitos básicos da ferramenta: (i.) entry; (ii.) output; (iii.) loaders; e (iv.) plugins. É claro que o Webpack é bem mais do que isso, mas com esses quatro conceitos já podemos começar a brincar! 🙌
Entry Point
O ponto de entrada é por onde o Webpack vai começar a agir. Esse deve ser um arquivo javascript que, a partir dele, o Webpack vai construir todo seu gráfico de dependências. Tudo que for importado e dependência (direta ou indireta), vai ser importado pelo Webpack, que vai começar a montar os módulos.
Output
Lógico que, depois de saber por onde começar, o Webpack também tem que saber o que fazer com os bundles que criou. Por isso deve ser especificado um ponto de saída (output). Se nada for passado (vamos falar de config files depois), o padrão vai ser a pasta .dist/main.js para o arquivo principal javascript. E quaisquer outros arquivos (que não seja o bundle principal) serão colocados também colocados na pasta dist.
Loaders
Webpack é para arquivos Javascript (e JSON). Então, sem usar um loader, o Webpack não vai entender um arquivo css ou png, por exemplo. E muitas vezes vai fazer sentido colocar também esses outros tipos de arquivos no fluxo do Webpack. Pra isso será necessário a utilização dos Loaders. É importante saber que os loaders precisam de duas propriedades necessariamente:
- A propriedade
test. Com o test, a gente identifica que tipo de arquivo a gente quer transformar com aquele loader específico. - A propriedade
use. No use a gente diz qual loader vamos usar.
Plugins
A função básica de um loader é carregar um arquivo e transformar ele para que ele entre no bundle do webpack. Agora, para várias outras funções, podemos utilizar plugins.
Um dos plugins mais populares é o html-webpack-plugin, que gera um arquivo HTML que injeta automaticamente dentro dele os bundles gerados pelo Webpack.