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:aryel.tupinamba@lqdi.netFacebook:http://facebook.com/aryel.tupinambaTwitter: http://twitter.com/DfKimeraLinkedIn:http://linkedin.com/in/aryeltupinamba

Slides da palestra:http://slideshare.net/aryeltupinamba

http://lqdi.net