Webpack é um agrupador de módulos para aplicações JavaScript modernas que constrói recursivamente um grafo com todas as dependências para execução da aplicação. Ele facilita a configuração e deploy para qualquer ambiente, reduz o overhead de dependências e permite code splitting e importação de módulos sem ordem definida.

2. Webpack
Agrupador de módulos destinado a aplicações modernas em
JavaScript. Constrói recursivamente um grafo com todas as
dependências para a execução da aplicação.
O que é?

3. ● Facilmente configurável (webpack.js.org/configuration/);
● Permite efectuar deploys para qualquer ambiente, mais
estáveis;
● Redução no overhead de dependências no projeto agrupado.
● code splitting;
● Não precisar de ter em conta a ordem de importação das
dependências;
WebpackPorquê utilizar?

4. ● Aplicações Front End de maior dimensão ou complexidade;
● Core concepts - https://webpack.js.org/concepts/.
WebpackQuando utilizar?

5. WebpackComo Funciona?

6. ● npm install -g webpack
● Configurar o ficheiro webpack.config.js;
● Definir o ponto de partida “entry point”, para a geração
do grafo de dependências.
WebpackComo utilizar?
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};

7. ● Indicar o Output para o bundle;
WebpackComo utilizar?
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// writes to disk: ./dist/app.js, ./dist/search.js

8. ● Utilização de Loaders - estes sao responsáveis pelas
transformações aplicadas ao código fonte de um módulo.
● Podem transformar ficheiros de diferentes
linguagens(css,typescript,Coffee,JSX,json)
● Loaders podem ser síncronos ou assíncronos;
● Parametrizáveis(aceitam query parameters ou um options
object);
WebpackComo utilizar?

9. ● Utilização de Plugins - geralmente utilizados para
customizar o processo de build do webpack, têm também o
propósito de fazer o que os loaders não fazem.
WebpackComo utilizar?

10. WebpackAnálise Swot
Pontos Fortes:
● Inovação;
● Open Source;
● Modular;
● Fácilmente Configurável;
Pontos Negativos
Oportunidades:
● Ferramenta que pode ser
integrada em imensos tipos
de projectos
Ameaças

11. WebpackPatrocinadores?

12. Short Demo Time