O documento apresenta o Webpack, uma ferramenta de empacotamento de módulos que permite carregar dependências de forma otimizada. O Webpack usa plugins e loaders para processar diferentes tipos de arquivos e gerar um único arquivo de saída, resolvendo dependências de forma recursiva. Embora o Webpack não execute tarefas como compilação de Sass ou transpilação de ES6 diretamente, ele suporta esses casos por meio de loaders adequados.

1. Webpack
A evolução do asset pipeline
Aryel Tupinambá
FrontInVale 2016

2. O que é essa lightning talk?
SOBRE O QUE VOU FALAR:
- O que o Webpack faz
- O que ele não faz
- Por que você deve dar a mínima
- Quais os problemas com ele
- Links de onde correr atrás
SOBRE O QUE NÃO VOU FALAR
- Ensinar como usar o Webpack
- Dizer como fazer X ou Y com o Webpack
- Comparar o Webpack com outras
ferramentas
- Repetir trechos de documentação

3. O que é esse tal de Webpack?
"Module Bundler"; asset pipeline on steroids

4. src/math.js
src/increment.js
src/main.js
dist/output.js

5. src/math.js
src/increment.js
src/main.js
dist/output.js
Export no estilo CommonJS
Require indicando uma
dependência
Arquivo principal, carrega
uma dependência
Arquivo compilado pelo
Webpack, com as
dependências recursivas
compiladas na ordem correta

6. Permite carregar dependências de
Sass/CSS do NPM
Carrega arquivos e permite
que você customize, no
Webpack, regras de
otimização
Processa SVG em PNG
Empacota arquivos JSON em
dependências compatíveis
com "require"
Empacota e carrega fontes
Inclui um arquivo Sass no módulo
JS

7. Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?

8. Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?

9. Como funciona a mágica do Webpack?
Plugins
● Funcionalidades do
Webpack
● Acesso ao processo de
pipelining e packing
Ex: UglifyJS, BannerPlugin,
NgAnnotate, ImageMin,
HtmlMinify, AngularPlugin,
I18nPlugin ...
Loaders
● Extendem a capacidade do
Webpack de carregar e
processar arquivos
● Pode exigir o carregamento
de um plugin
Ex: script, file, url, json, base64,
xml, to-string, includes, combines,
image, svg-sprite, polymer, zip-it,
s3 ...

10. Entry-point da aplicação (deve
conter os requires de tudo que deve
ser "empacotado")
Loaders: formados por um test
("quais arquivos aplicar?") e uma
série de loaders ("quais loaders
processarão esses arquivos?")
Loaders podem ser enfileirados, da
direita para a esquerda, formando,
literalmente, um "pipeline"
Alguns loaders podem especificar
"queries", dizendo como processar
determinados assets

11. Por que eu deveria me importar?
É o ponto culminante da
evolução das ferramentas de
compilação e asset pipeline
Acaba com um grande overhead
mental de gerenciar o assets e
dependências de JS, SCSS, etc
Deixa o desenvolvimento web
divertido de novo, e tão fluído
quanto o back-end

12. Me interessei, onde eu vejo mais disso aí?
Webpack Module Bundler
http://webpack.github.io/
Recomendo a leitura do "Getting started" e dos tutoriais
para entender como editar o webpack.config e
configurar os loaders
Webpack Beginner's Guide por Nader Dabit
https://medium.com/@dabit3/beginner-s-guide-to-
webpack-b1f1a3638460
Leia esse cara antes de começar a montar seu
workflow, vai te salvar algumas boas horas de quebrar a
cabeça
Practical Examples by Julien Renaux
http://julienrenaux.fr/2015/03/30/introduction-to-
webpack-with-practical-examples/
Leia esse cara antes de começar a montar seu
workflow, vai te salvar algumas boas horas de quebrar a
cabeça
Webpack - List of Loaders
https://github.com/webpack/docs/wiki/list-of-loaders
Vale passar o olho aqui para ver tudo que dá pra fazer
com os loaders já bem maduros, antes de começar a
montar seu workflow.

13. Obrigado!
Now go and build something awesome!
E-mail / Hangouts:
aryel.tupinamba@lqdi.net
Facebook:
http://facebook.com/aryel.tupinamba
Twitter:
http://twitter.com/DfKimera
LinkedIn:
http://linkedin.com/in/aryeltupinamba
Slides da palestra:
http://slideshare.net/aryeltupinamba
http://lqdi.net