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.
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
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
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