- Overview
- O que é um module bundler?
- Pra quê serve um módule bundler?
- Projeto
- index.html: inclui lodash e src/index.js
- src/index.js: "component" usando lodash global
Preparando webpack
- Servir o projeto com http-server
- Instalar webpack
- Compilar src/index.js com webpack
- Watch mode
- Production mode
- Ajustar o index.html para usar o bundle.js
- webpack.config.js
- Entry
- Output
- Remover lodash global
- Referenciar lodash no src/index.js
- Instalar webpack-dev-server e html-webpack-plugin
- Remover referência de script do index.html
- webpack.config.js
- Plugins
- NPM scripts
Incluindo estilos
- Adicionar src/styles.css
- Referenciar no src/index.js
- Instalar css-loader e style-loader
- webpack.config.js
- Loaders (regra pra css)
- Plugins (extract-text-webpack-plugin)
Preparando assets
- Adicionar imagem e fonts
- Referenciar no styles.css (@font-face)
- Instalar url-loader e file-loader
- webpack-config.js
- Loaders (regra para fonts)
- Limit de inline
- Nome do arquivo
- Referenciar no index.html (img)
- Instalar html-loader
- webpack-config.js
- Loaders (regra para imagens)
Preparando doge
- Adicionar um novo módulo (src/doge.js)
- Modificar component no src/index.js para usar o src/doge.js
- webpack.config.js
- named chunks no entry
- [name] no output.filename
- CommonsChunkPlugin
Projeto finalizado