Hora de finalmente entender o Webpack!

Hora de finalmente entender o Webpack!

nick-young-confused-face-300x256-nqlyaa

O Webpack é uma ferramenta fantástica e poderosíssima, entretanto, ao mesmo tempo é bastante confusa a primeira vista. Se o seu primeiro contato é com um arquivo de configuração em projetos grandes, a chance de entender o que está acontecendo cai quase pra zero. A cada linha de configuração, surgem 10 dúvidas diferentes, não é mesmo?

Para te ajudar a não sofrer mais com isso, hoje vamos dar uma olhada rápida em como configurar um projeto do zero com o Webpack.

Iniciando um projeto

O primeiro passo para usar a ferramenta é ter ela na sua máquina e/ou no seu projeto. Para sairmos totalmente do zero, crie um novo projeto com o comando npm init e então coloque os seguintes pacotes como dependência:

npm install --save-dev webpack webpack-cli webpack-serve

Note que estamos instalando 3 pacotes:

  1. webpack: É o pacote que faz toda a mágica acontecer. É o core.
  2. webpack-cli: Este é o utilitário da linha de comando. É com ele que conseguimos chamar o webpack no terminal.
  3. webpack-serve: Este é um pacote que nos permite subir a configuração do webpack em um servidor de testes. É muito semelhante ao webpack-dev-server.

Feito isso, crie um arquivo index.html na raiz do seu projeto com o seguinte código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebPack</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Veja que estamos adicionando um arquivo chamado bundle.js como script na página. Este arquivo será o resultado de todo o código que será compactado e gerenciado pelo Webpack. Ou seja, ao invés de termos diversos arquivos js, ele compactará tudo em um só.

Agora, crie um arquivo JavaScript com o nome index.js e coloque o seguinte conteúdo:

let $ = require('jquery');

const cursos = ['ES6', 'ES7', 'ES8'];

cursos.forEach(curso => {
  $('body').append('<h1>'+ curso +'</h1>');
});

Preste muita atenção no que estamos fazendo. Estamos usando o require para trazer o jQuery como dependência para o nosso arquivo JavaScript. A ideia é que o Webpack resolva esta dependência para nós e traga o jQuery para que possamos utilizá-lo. Bacana né? Com isso, vamos apenas editar o body para inserir um conteúdo nele.

Com estes dois arquivos, já estamos prontos para rodar o nosso webpack pela primeira vez. Não acredita? Então vá no terminal e digite o comando:

webpack index.js --output bundle.js

O que ele faz aqui também é muito simples. O index.js é o que chamamos de entry point, ou seja, o ponto de entrada da sua aplicação. No --output, colocamos como parâmetro o arquivo que queremos gerar. Neste caso, colocamos como bundle.js (mas poderia ser qualquer coisa, até mesmo tekzoom.js).

Na hora que você rodar este comando, o arquivo bundle.js será gerado! Nele estará todo o código que colocamos no index.js e o código fonte do jQuery!

Quero aprender mais!

Sentiu o gostinho do poder do Webpack? É bem bacana, não é mesmo? Para não prolongar muito o artigo, preparei uma versão ilustrada e mais explicativa sobre o Webpack em um e-book gratuito. O e-book se chama "ebpack que faz sentido!" e está disponível neste link!

webpack_que_faz_sentido

Lá está explicado como fazer configurações mais avançadas usando o webpack.config.js e como subir um servidor de desenvolvimento usando o webpack-serve.

Confere lá! ;)

Hospede suas Aplicações por $5 na Digital Ocean e GANHE $10 em créditos na hora!

A Digital Ocean é uma empresa mundialmente reconhecida pela qualidade de seus serviços e possui servidores privados de alta performance e qualidade profissional por valores extremamente baixos se comparados ao seus principais concorrentes, como a Amazon.

Criando sua conta na DO através deste link você ganha na hora $10 para testar os serviços da empresa e também conseguir fazer tudo que mostramos em nossos vídeos em tempo real e sem gastar nada.

As VPS da DO são recomendadas ainda para a hospedagem de Sites de Conteúdo, Blogs, Aplicações Web e Redes Sociais, pois é possível configurar os servidores com todos os recursos que você ou seu projeto necessitam. É uma verdadeira maravilha!

Clique aqui e ganhe na hora $10 para poder testar melhor a VPS e os serviços da Digital Ocean. Aproveite!

Autor

Diego Pinho

Desenvolvedor, Fundador da escola de programação @CodePrestige, autor de livros na @casadocodigo e colunista no @iMasters

São Paulo https://diegopinho.com.br Diego Pinho Diego Pinho

Mais conteúdos para você

Comentários