Fale com a gente no WhatsApp Fale com a gente no WhatsApp

Curso de Webpack - Empacotando aplicações

Aprenda como sanar as principais necessidades de desenvolvimento com uma única ferramenta

Nível Intermediário Categoria Desenvolvimento Front-end

  • Curso com 02h47 de vídeos
  • Certificado com 10 horas
  • 18 exercícios

Sobre o curso

Os navegadores apenas interpretam HTML, CSS e JavaScript. Conforme nossos projetos vão crescendo, gerenciar todas as dependências e configurações começa a ficar cada vez mais complicado.

Para nos auxiliar com isso, automatizadores de tarefas surgiram, como o Grunt e Gulp. Para permitir trabalhar com dependências do JavaScript, também usávamos o Browserify.

Com o Webpack essas tarefas ficam bem mais simples. E além de JavaScript, podemos também trabalhar com vários outros tipos de arquivos, como TypeScript, Sass, CSS, HTML, imagens, etc.

Esse curso irá mostrar as funcionalidades e possibilidades do Webpack e como podemos gerenciar todas essas configurações de forma simples e organizada

Os navegadores apenas interpretam HTML, CSS e JavaScript. Conforme nossos projetos vão crescendo, gerenciar todas as dependências e configurações começa a ficar cada vez mais complicado.

Para nos auxiliar com isso, automatizadores de tarefas surgiram, como o Grunt e Gulp. Para permitir trabalhar com dependências do JavaScript, também usávamos o Browserify.

Com o Webpack essas tarefas ficam bem mais simples. E além de JavaScript, podemos também trabalhar com vários outros tipos de arquivos, como TypeScript, Sass, CSS, HTML, imagens, etc.

Esse curso irá mostrar as funcionalidades e possibilidades do Webpack e como podemos gerenciar todas essas configurações de forma simples e organizada

O que irá aprender?

Neste curso iremos apresentar o Webpack, veremos como ele funciona e como ele pode nos beneficiar durante o desenvolvimento de nossas aplicações.

Alguns itens presentes no curso:

  • Conhecendo o Webpack;
  • Carregando vários tipos de arquivos com Loaders;
  • Usando e Criando Plugins;
  • SourceMaps;
  • Webpack Dev Server;
  • Live Reload e Hot Module Replacement (HMR);
  • Organizando configurações em arquivos;
  • Carregamento sob demanda (lazy loading);
  • Eliminação de JS e CSS não usados (Tree Shaking);
  • Transpilação (Babel e Sass).

Pra quem é esse curso?

Este curso é destinado a desenvolvedores web que queiram melhorar seu fluxo de trabalho com o auxílio de uma das ferramentas mais utilizadas atualmente, o Webpack.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Ambiente do curso

  • Sublime Text - 3.0.0
  • Google Chrome - 65
  • Node.js - 9.6.1

Sobre o professor

Akira Hanashiro

Akira Hanashiro

Professor especialista em Desenvolvimento Front-end na TreinaWeb. Akira, Felipe, Hana, Hanashiro ou Hanakira, é graduado em Análise e Desenvolvimento de Sistemas, pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning, é entusiasta no desenvolvimento de jogos e multi-task. Fala japonês fluente, mas não tem com quem conversar.

Conteúdo programático

  1. Conhecendo o Webpack

    Apresentação do Webpack.

    5 aulas
    • O que é?
    • Como funciona?
    • O que podemos fazer com Webpack?
    • Instalação
    • Questionário
  2. Começando com Webpack

    Nesta aula, iniciaremos o nosso estudo do Webpack.

    4 aulas
    • Primeiro Comando
    • Arquivo de Configuração
    • Loaders
    • Plugins
  3. Entries e Outputs

    Nesta aula, veremos o funcionamento da entra e saída de artefatos.

    4 aulas
    • Múltiplas entradas e saídas
    • Placeholders
    • Carregando códigos de terceiros
    • Questionário
  4. Loaders

    Nesta aula, veremos o carregamento de CSS.

    2 aulas
    • Carregando CSS
    • Questionário
  5. Plugins

    Nesta aula, veremos o uso de Plugins.

    3 aulas
    • Usando Plugins
    • Criando um Plugin
    • Questionário
  6. Webpack no Desenvolvimento

    Nesta aula, veremos o uso do Webpack no desenvolvimento.

    8 aulas
    • Source Maps
    • Watch Mode
    • Webpack Dev Server e Live Reload
    • Hot Module Replacement (HRM)
    • Variáveis de Ambiente
    • Organizando Configurações em Arquivos
    • Iniciando a configuração do WebPack automaticamente
    • Questionário
  7. Webpack na Produção

    Nesta aula, veremos o uso de alguns plugins no webpack.

    5 aulas
    • Extract Text Plugin - Exportando arquivos
    • CSS Purify - Removendo CSS não utilizado
    • Tree Shaking - Removendo JavaScript não utilizado
    • Lazy Loading - Carregando arquivos sob demanda
    • Questionário
  8. Pré-Processadores

    Nesta aula, conheceremos os pré-processadores.

    2 aulas
    • Pré-Processadores JavaScript
    • Pré-Processadores CSS
Download da ementa

Cursos relacionados

Utilizada e amada por milhares! Veja mais opiniões reais

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
R$ 129,00 ECONOMIZE R$ 960,00
12x R$ 49,00 sem juros, no cartão de crédito
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!