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?
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
App é mais escalável se segmentares os entry points e por consequência os grafos de dependências.
Ao configurar o output indicamos ao webpack onde deve gravar os ficheiros compilados em disco.
Nota: Apesar de poderem haver vários entry points apenas um output deverá ser configurado.
Este objeto deve conter no mínimo filename e um path.