Please enable JavaScript.
Coggle requires JavaScript to display documents.
Webpack is a module bundler (Características (Feito em Javascript,…
Webpack
is a module bundler
Características
Feito em Javascript
Totalmente configurável através do arquivo padrão webpack.config.js
Um pouco complexo de configurar
Trabalhar apenas com os arquivos que foram importados (import / require) ignorando os demais.
Mifinica HTML, CSS, Javascript; otimiza imagens; gera source map ...
É possível determinar os arquivo para os quais serão feito o bundle através da propriedade entry e a saída do módulo através da propriedade output.
Possui um servidor web webpack-dev-server.
Possui Hot Reload
Dependency graph - resolve a ordem do carregamento do dependências
Realiza o split do código para evitar baixar arquivos de 1mb das SPAs
Faz asset hashing para tratar o cache das novas versões.
Plugins
Exemplos
CopyWebpackPlugin
Hot Module Reload
HtmlWebpackPlugin
PurifyCSSPlugin
PurifyCSSPlugin
É um objecto Javascript com acesso ao lifecycle do processo de compilação através da propriedade
apply
que é invocada. É possível executar comandos de acordo com os eventos e tipo de dados.
É possível configurar as opções do plugin no momento da instanciação do objeto.
Os plugins são responsáveis por realizar o Bundle, minificar, separar (split), move/copy ...
Modules
Se tratando de programação modular todo chunk, ou seja, um pedaço do código com uma função específica na aplicação é um módulo.
O webpack considera um módulo todo arquivo carregado via: import (ES2015), require (CommonJS), define/require (AMD),
import
e url(image) (SCSS, LESS, CSS...)
Os módulos são responsáveis pela tranformação do código.
Loaders
Exemplos
Babel-Loader
PostCSS-Loader
File-Loader
Loaders são transformações / alterações aplicadas ao código dos módulos conforme os mesmos são carregados (required, load, import...). Ex.: um arquivo .sass para .css
Target
É possível determinar o target para o qual o módulo irá rodar. Ex.: Node, Browser, etc.