FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)
-
Upload
aryel-tupinamba -
Category
Internet
-
view
60 -
download
3
Transcript of FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)
WebpackA evolução do asset pipeline
Aryel TupinambáFrontInVale 2016
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
O que é esse tal de Webpack?
"Module Bundler"; asset pipeline on steroids
src/math.js
src/increment.js
src/main.js
dist/output.js
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
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 PNGEmpacota arquivos JSON em dependências compatíveis com "require"
Empacota e carrega fontes
Inclui um arquivo Sass no módulo JS
Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?
Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?
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 ...
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
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
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.
Obrigado!Now go and build something
awesome!
E-mail / Hangouts:[email protected]:http://facebook.com/aryel.tupinambaTwitter: http://twitter.com/DfKimeraLinkedIn:http://linkedin.com/in/aryeltupinamba
Slides da palestra:http://slideshare.net/aryeltupinamba
http://lqdi.net