O que é? (Onde vivem? O que comem?)
webpack (com “w” minúsculo, respeitando a grafia do site oficial) é um empacotador de código para projetos web, como o browserify. O que ele se propõe a fazer de diferente é focar em módulos da sua aplicação. Nem sempre ter todo e qualquer JavaScript/CSS do seu projeto num único arquivo é bom, por isso o webpack tem a ideia de code splitting, onde você modulariza partes reaproveitáveis do seu projeto, facilitando o desenvolvimento independente, por exemplo, ter uma equipe trabalhando em um módulo X e outra num módulo Y, mas ambos de um mesmo projeto.
Não é sempre que a gente faz um projeto tão grande assim, a ponto de precisar separar equipes em diferentes módulos, mas o webpack também pode ser ideal para pequenos projetos.
Instalando
É bem simples. Você tem o webpack como pacote do NodeJS. Se você não sabe o que é NodeJS, pare agora e leia esse artigo. Sugiro dar uma pesquisada sobre NPM antes. Se você entendeu tudo até aqui, pode escolher entre tê-lo globalmente ou somente num projeto:
Usando
É bem simples, também. O comando espera dois argumentos, um arquivo de entrada e um arquivo de saída que se não existir vai ser criado e se já existir será substituído.
Você pode definir um arquivo de configuração pro comando com a opção --config example.config.js se nada for passado o webpack vai procurar um arquivo chamado webpack.config.js onde ele está sendo executado (normalmente raiz do projeto) se não achar, vai usar as configurações padrão, o famoso default.
Loaders e preloaders
O webpack pode executar transformações nos arquivos durante o processo de empacotamento, essas transformações são, por exemplo, nossos famosos pré-processadores, React (JSX), Coffee, 6to5, SweetJS, TypeScript… a lista de loaders já prontos é muito boa e claro, você pode construir os seus se sentir falta de algum. Também tem Less, Sass, Stylus, Jade, Ejs, Mustache, Handlebars, Markdown… não é só pra JavaScript. Em adição aos loaders, você pode ter plugins, que executam processos mais complexos que as transformações, por exemplo, UglifyJsPlugin! Yay!
Bora ver na prática
Vamos criar um módulo super útil que nunca vi por aí que serve pra deixar as letras de um texto em caixa alta.
Agora a gente chama esse modulo no nosso arquivo de entrada, que não é necessariamente o principal, por isso a gente não vai chamar de main.js ou app.js.
Sim! Como puderam perceber, podemos usar o padrão CommonJS pra criar nossos módulos, que é o mesmo padrão usado pelo NodeJS, então a gente pode usar alguns pacotes do NPM também, mesmo num build com target pro browser (módulo focado para o navegador). Vamos ver o que vai dar isso até agora.
O comando gera um report simples no console mesmo, aqui ficou:
Se você estiver acompanhando na prática, pode abrir o bundle.js (se já não fez isso seguindo o instinto curioso de qualquer dev) e ver como fica o build. Você vai notar que o webpack tem um boilerplate até considerável, mas é útil, ele tem um sistema de cache que performa os builds, ele vai saber qual módulo mudou de verdade ao invés de pegar tudo e buildar tudo de novo.
React tá na moda, vamos usar.
Vamos usar um arquivo de configuração pra vincular os arquivos .jsx ao Loader certo, o webpack usa RegExp pra testar sobre o nome dos arquivos e vincular a um loader e o arquivo de configuração é um módulo CommonJS. Já que estamos usando um arquivo para a configuração, vamos por nele qual é nosso entry e qual é nosso output. Mas antes, como usaremos módulos do NPM, vamos inicia-lo em nosso projeto e ter um arquivo declarando essas dependências, o packages.json.
Nosso arquivo de configuração vai ficar assim:
Agora é só rodar o webpack, sem passar nada, ele já vai ler nas configurações.
Tá lá! Você tem um bundle com React pronto pra web.
Concluindo
Essa foi só uma introdução e vale ressaltar que o webpack não é uma alternativa aos tasks managers como Gulp e Grunt (caso alguém tenha entendido isso), mas só com o webpack você tem um watcher pro build acontecer logo que ele detecta uma alteração em um arquivo e o plugin do UglifyJS pra minificar seu build.
Isso aí, se ficou alguma dúvida, só chamar 😉
Apoio: A Netflix elegeu a NET Internet como a banda larga mais rápida do país. Acesse e confira os planos em promoção na sua região!
