https://github.com/geovanisouza92/talk-webpack

Exemplo de site estático empacotado com Webpack
https://github.com/geovanisouza92/talk-webpack

doge webpack

Last synced: 15 days ago
JSON representation

Exemplo de site estático empacotado com Webpack

• Host: GitHub
• URL: https://github.com/geovanisouza92/talk-webpack
• Owner: geovanisouza92
• Created: 2017-09-07T22:36:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-07T22:37:11.000Z (over 7 years ago)
• Last Synced: 2023-03-22T20:53:45.019Z (almost 2 years ago)
• Topics: doge, webpack
• Language: JavaScript
• Homepage:
• Size: 187 KB
• Stars: 4
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Roadmap

- 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

# master

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

# 01-webpack

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)

# 02-styles

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)

# 03-assets

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

# 04-doge

Projeto finalizado