Webpack: trabalhando com módulos na sua webapp

Instalação e configuração inicial - Apresentação

Olá, pessoal! Eu sou Flávio Almeida. Boas-vindas ao curso de introdução ao webpack. Eu quero mostrar para vocês uma aplicação de negociações em bolsa de valores onde eu posso cadastrar uma negociação com data, uma quantidade e um valor e importar essas negociações em uma API.

Essa aplicação já está completa para que vocês possam ver, mas a pergunta que eu faço é: eu terminei a minha aplicação, eu posso pegar essa aplicação e colocar direto em produção? A resposta é não!

Durante esse processo entre você terminar sua aplicação e colocar em produção, você tem que gerar uma série de otimizações, uma série de processos nessa aplicação, para que ela carregue mais rápido nos navegadores, para que ela se torne mais compatível e por aí vai. A grande sacada é que essa aplicação vai ser o pano de fundo para que possamos evoluir e avançarmos no conhecimento de webpack.

Se voltamos para o projeto que estou trabalhando, vamos trabalhar com configuração e instalação do webpack, o centro nervoso do webpack - que é o “webpack.config.js”. Vamos aprender do início até o fim criarmos um script do webpack que vá pegar a nossa aplicação, empacotá-la em bundles, aplicando otimizações e gerar um build final onde você poderia colocar em produção.

Ainda vou falar um pouco sobre webpack-dev-server, como ele pode nos ajudar no final do curso a termos um ambiente bem produtivo. Se o seu objetivo é entender como o webpack funciona, para poder ir para frameworks como o Angular, o React e o JS, você pode ficar muito tranquilo, porque apesar desses frameworks utilizarem o webpack, eles não deixam exposto o webpack para que o desenvolvedor posso configurá-lo.

Porém, fazendo esse curso e tendo uma noção de como o webpack funciona você vai entender com mais clareza a questão sobre Lazy Loading e o Code Splitting, porque vou falar aqui nesse curso e isso faz parte do jargão de quando desenvolvemos em cima do page application’s.

Uma coisa muito importante sobre infraestrutura é que o browser que estou utilizando nesse treinamento é o Chrome e o editor de texto que eu vou utilizar é o Visual Studio Code - é um editor de texto gratuito, eu sugiro vocês utilizarem ele.

E um requisito de infraestrutura muito importante é o Node Js. No meu caso, eu estou utilizando. Se voltarmos para o projeto, a versão que estou utilizando é a versão 1021. O Node tem a versão 12, tem a versão 14, mas essa é a versão mínima que eu garanto que vai funcionar tudo o que fizermos nesse treinamento. Evite utilizar versões ímpares no Node, versões que não são LTS.

Se você quiser ter uma paridade absoluta comigo, utilize essa versão do Node Js. Eu estou utilizando o webpack mais novo e plugins mais novos na data de criação desse treinamento para dar para vocês uma experiência primorosa e atualizada do curso de webpack.

Tendo certeza que você tem a infraestrutura necessária na sua máquina, nós vamos para o próximo vídeo, onde eu vou mostrar o projeto. Vocês vão ter o link do projeto também para baixar no vídeo e descompactar, para que nós possamos continuar nossos trabalhos. Vamos lá!

Instalação e configuração inicial - O projeto

Pessoal, vamos lá! A primeira coisa que eu vou fazer aqui é: eu tenho o projeto “webpack-alura-1” aqui baixado e descompactado na minha área de trabalho. Vou abrir o Visual Studio Code.

Está aqui o Visual Studio Code aberto, é o editor de texto que eu sugiro vocês utilizarem ao longo do treinamento. Vou aqui na opção para abrir o projeto, “Open...”. Se você utiliza o Windows essa opção é “Open Folder”, no Mac “Open...” e “Open Folder” dão no mesmo. Vou clicar em “Open”, vou lá na minha área de trabalho e clico em “webpack-alura-1”. Selecionei a pasta, “open”.

Temos o projeto aqui, vou explicar para vocês a estrutura. Esse projeto tem um pequeno servidor web para disponibilizarmos o projeto que já está pronto - que vamos otimizar e utilizar o webpack, precisamos de um projeto que tenha algum sentido - nesse projeto que baixamos, dentro da pasta “app>src”, temos o arquivo “app.html” do projeto, os arquivos “js” do projeto que vamos precisar otimizar, arquivo “css”.

Então a pasta “src” é a pasta do projeto. Eu vou falar um pouquinho sobre esse projeto, eu vou entrar e vou falar sobre ele.

Como eu faço para compartilhar esse projeto com o meu navegador? É isso o que vamos ver agora! A primeira coisa que você vai fazer assim que descompactar o seu projeto é abrir o seu terminal favorito - ou dentro do VS Code, clicar em “Terminal>New Window”, ele vai abrir uma janela de terminal, dentro da pasta que você está aqui do projeto.

Se eu digitar aqui dir - no Windows é dir, aqui é ls no Mac - conseguiremos ver que estamos dentro da pasta raiz, que é o “webpack-alura-1”. Dentro dessa pasta, por favor, vocês farão npm install para baixarem as dependências do pequeno servidor web que eu tenho aí para poder disponibilizar esse projeto. Vou clicar npm install e ele vai baixar.

Agora, como vou rodar esse projeto? Se olhamos o arquivo package.json esse arquivo tem um script de inicialização do nosso projeto.

Quando eu executar esse script ele vai executar o lite-server, que é o servidor que estou utilizando para compartilhar esse arquivo. Eu vou dizer que o baseDir é app e ele vai compartilhar tudo o que está dentro da pasta “app”.

Dentro da pasta “app” temos o “index.html”, que quando for aberto vai redirecionar para app.

Então eu vou abrir o meu projeto e por debaixo dos panos ele vai redirecionar para “app”. O que eu peço para vocês é focarem só nessa pasta “src”, é essa pasta que tem meu “css”, meu arquivo JavaScript, a minha página principal da aplicação e por aí vai. Ficou claro?

Como é que rodo esse projeto? Agora que dei o npm install eu posso dar npm run start. Quando eu fizer isso, automaticamente o navegador padrão do meu sistema operacional vai ser aberto. Se ele não for aberto nós vamos digitar uma URL que vou fazer aqui com vocês. Executei npm run start, ele abriu o projeto para na pasta “localhost:300/src/app/html”.

Isso faz sentido porque se estou compartilhando “app” dentro de “app” é o meu local host aqui. Dentro de “app” eu tenho a “src”, e dentro de “src” eu tenho “app.html” – “localhost:3000/src/app.html”.

Minha aplicação é carregada. É assim que vamos trabalhar durante bastante tempo do nosso treinamento para compartilharmos os arquivos. Porque depois que eu usar o processo do bundle do webpack, de compactar, e fazer todas as otimizações eu quero ter em um único lugar a opção de poder testar a versão antiga com a versão nova, ler os resultados e ver o que acontece.

Outra coisa que essa aplicação rapidamente fala é de uma aplicação de bolsa de valores. Eu posso cadastrar uma negociação. Tem que ser em um dia útil, se eu colocar essa data que não é em um dia útil, eu vou tentar incluir e nada acontecerá - porque é apenas negociações em dias úteis.

Agora, se coloco um dia útil, eu consigo incluir na tabela.

Mais tarde vamos ver que esse botão “importar” aqui vai se integrar com um API do back-end para obter os dados de negociações. “Flávio, por que isso é importante para o webpack?” Porque eu quero entregar alguns cenários que são bem comuns no dia a dia do desenvolvedor e como é que você lida, resolve e otimiza utilizando o webpack.

Até agora nada de webpack, apenas essa estrutura básica aqui do projeto para podermos, a partir dele, continuar trabalhando e realizando nossos projetos!

Outra coisa é que se eu abrir aqui o console do navegador na aba “Network” e dou refresh, você vai ver que se eu vejo o código fonte da minha página, eu vou estar utilizando o sistema de módulos do ECMAScript 5.

Ele carrega o “app.js” e a partir disso ele consegue resolver todas as dependências. O navegador é inteligente para baixar todos esses módulos de script dinamicamente, sem eu ter que me preocupar.

Vamos lá, vamos continuar o projeto!

Instalação e configuração inicial - Laténcia e largura de banda

Pessoal, a primeira coisa que eu quero aprimorar no nosso projeto, quando formos colocá-lo em produção, é a seguinte: eu quero concatenar todos esses módulos em um único módulo e carregar esse único módulo em nossa aplicação.

Segunda: eu quero conseguir compactar, ou seja, minificar todos esses scripts para eles ficarem menores, possíveis, para onerarem menos a largura de banda do usuário.

Se olhamos em nosso projeto, voltamos e inspecionamos em nosso “Index.html”, nós estamos utilizando o sistema de module do ECMAScript, o sistema de module nativo. Esse sistema quando detecta que “app.js” é carregado no navegador é inteligente para entender que se o “app” depende de um outro script, ele vai carregar esse script.

E se esse script depende de outro, ele vai carregar esse outro, e o outro e outro... Ou seja, toda a árvore de dependência é resolvida pelo próprio navegador e nós só indicamos qual é o módulo principal a ser carregado da nossa página.

Isso aqui não é nada de webpack, isso aqui não é nada de biblioteca do JavaScript, isso é o padrão que o navegador tem e já suporta hoje em dia. Tanto isso é verdade que se eu abro o nosso código dentro da pasta “src” que eu tenho o projeto, eu tenho “app.js”.

Se eu abro vamos ver que esse “app.js” importa o negociacao-controller.js. E se eu vou nesse negociacao-controller, ele importa uma série de outros artefatos e tudo isso vai ser resolvido automaticamente para nós.

De novo, isso é perfeito? É! Porque no passado o desenvolvedor era responsável por carregar todos os scripts na ordem. Para nós, ainda não está muito interessante porque, primeiro: eu quero concatenar todos esses arquivos em um único script para evitar múltiplas requisições para o servidor; e segundo: eu quero minificar esses *scripts”, eu quero compactá-los para onerar menos a largura de banda.

Eu quero resolver dois problemas aqui: a latência, que é o tempo de pedir cada script em separado; e largura de banda, que é diminuir os scripts. Esse é o primeiro problema que o webpack vai nos ajudar a resolver.

Mas, para isso, eu tenho que começar a configurar o webpack, fazer a sua instalação e configurar o seu centro nervoso, que é o “webpack.config.js”. É isso que vamos ver nos próximos vídeos!

Sobre o curso Webpack: trabalhando com módulos na sua webapp

O curso Webpack: trabalhando com módulos na sua webapp possui 147 minutos de vídeos, em um total de 54 atividades. Gostou? Conheça nossos outros cursos de Automação e Performance em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução
• Primeiro contato com plugins
• Tratando CSS como módulo
• Build de produção e boas práticas
• Webpack Dev Server