FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)
Transferir como PPTX, PDF1 gostou271 visualizações
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.
FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)
- 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
- 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