Webpack How To

Objetivo deste guia

Este é um manual de como trabalhar com o webpack. Ele inclui a maioria das coisas que usamos no Instagram e nada do que não usamos.

Meu conselho: comece com este manual como uma documentação para webpack, depois leia a documentação oficial para esclarecimentos.

Pré-requisitos

• Conhecer browserify, RequireJS ou algo similar
• Você valoriza:Divisão de pacotes (Bundle splitting)Carregamento assíncrono (Async loading)Empacotamento de conteúdo estático como imagens e CSS
• Divisão de pacotes (Bundle splitting)
• Carregamento assíncrono (Async loading)
• Empacotamento de conteúdo estático como imagens e CSS

1. Por que webpack?

• É como o browserify, mas pode dividir sua aplicação em múltiplos arquivos. Se você tem multiplas páginas em uma aplicação "single-page", o usuário baixa somente código para aquela página. Se ele vai para qualquer outra, ele não baixa novamente o código em comum.
• Frequentemente substitui grunt ou gulp porque ele pode construir, empacotar e preprocessar CSS, compilar para linguages JavaScript e imagens, entre outras coisas.

Suporta AMD (Definição de Módulos Assíncrono) e CommonJS, entre outros sistemas de módulo (Angular, ES6). Se você não sabe o qual usar, use CommonJS.

2. Webpack para usuários de Browserify

Estes são equivalentes: