Introdução a Webpack

Esta introdução a webpack explica como transformar módulos JavaScript em um bundle carregado pelo navegador. O exemplo original foi publicado em 2019, com webpack 4. Abaixo, você encontra o fluxo de instalação, configuração e execução, com observações para usar webpack 5.

O que é webpack?

O webpack é um empacotador de módulos JavaScript. Ele transforma os seus módulos num único arquivo Javascript, ou bundle, que pode ser facilmente carregado pelo navegador. O webpack é uma ferramenta extremamente poderosa e versátil, e pode ser usada para empacotar qualquer tipo de arquivo, desde JavaScript e CSS até imagens e arquivos de fontes. No entanto, o webpack é principalmente usado para empacotar aplicações JavaScript modernas que usam um bundler.

Ele irá funcionar recursivamente, um arquivo funciona como ponto de partida, a partir desse ponto inicial ele irá varrer todos os arquivos conectados na sua aplicação e para cada caso teremos um tratamento específico.

Quais as vantagens de utilizar webpack?

Qual a vantagem disso tudo? Ainda é comum em aplicação web carregando dezenas JavaScript com diferentes scripts tags, se você não fizer isso da maneira correta irá causa uma série de problemas de performance na sua aplicação. O gerenciamento de módulos ataca alguns problemas de performance.

O webpack gerencia as dependências JavaScript do projeto. Para CSS e pré-processadores, como Sass e Less, você configura loaders. No webpack 5, imagens e outros arquivos também podem usar Asset Modules, sem um loader específico para cada formato.

O tutorial original usava webpack 4. Para novos projetos, a documentação atual do webpack apresenta webpack 5. Use os exemplos como introdução aos conceitos e confira a compatibilidade de plugins e loaders antes de atualizar um projeto antigo.

Vale salientar que funcionamento do Webpack é um pouco diferente do Gulp e Grunt, eles são gerenciadores de tarefas enquanto o Webpack é um gerenciador de módulos, o seu foco é como os arquivos serão carregados separados por extensão.

Claro que podemos trabalhar uma série de recursos que o gulp/grunt realizam, por exemplo, toda parte de otimização, minificação, tratamento de arquivos e concatenação.

Como funciona Webpack

O processo de leitura com Webpack é dividido em 4 conceitos:

• Entry: qual será o nosso arquivo de entrada, o nosso ponto inicial
• Output: o nosso arquivo final gerado
• Loaders: para cada categoria de arquivo o Webpack possui um loader devemos gerenciar este ponto no nosso arquivo de configuração.
• Plugins: Webpack disponibiliza uma série de plugins, para diferentes tipos de situações.

Nas versões anteriores nos iniciávamos um projeto com o arquivo webpack.config.js nele especificamos como o Webpack ira se comportar. Na versão nova do Webpack podemos iniciar um projeto sem o arquivo de configuração, mas você quiser realizar otimizações extra com o webpack.config.js

Preparativos para a introdução a webpack

Para esse tutorial criaremos um projeto simples com dois arquivos, a estrutura será a seguinte, cada passo desse tutorial criarei uma branch para você acompanha a evolução dos arquivos, por exemplo, step-1… step-2… step-3… O nosso ponto de partida será o seguinte:

Antes de iniciar a introdução a Webpack, você irá precisar de uma versão atualizada do nodeJS/NPM, podemos verificar a versão do nosso NPM com o comando no nosso terminal:

npm -v

Na raiz no nosso projeto inicializaremos o nosso pacote NPM(step-2), nele salvaremos todas as dependências para o nosso projeto, assim no nosso terminal executamos o comando:

npm init

Na imagem acima temos o final do passo-a-passo realizar pelo NPM init, ele ira verificar se já temos um arquivo package.json, caso não, ele irar nos ajudar a criar um, efetuando perguntas sobre os campos necessários e ao final ele gerar um arquivo package.json:

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "Tutorial about webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fellyph/webpack-tutorial.git"
  },
  "keywords": [
    "tutorial",
    "webpack"
  ],
  "author": "fellyph",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/fellyph/webpack-tutorial/issues"
  },
  "homepage": "https://github.com/fellyph/webpack-tutorial#readme"
}

Code language: JSON / JSON with Comments (json)

Instalando webpack no seu projeto

Continuando nossa introdução a webpack, chegou a hora de instalar webpack em nosso projeto. Com o nosso package.json configurado agora instalaremos o webpack e webpack-cli no nosso projeto(step-3), voltando para o terminal executaremos os seguintes comandos:

npm install webpack webpack-cli --save-dev

Se tudo correr bem teremos a confirmação no nosso terminal:

Caso a versão do seu node não suporte a última versão do Webpack, você receberá um alerta para atualizar o seu nodeJS e NPM. Agora criaremos a determinada situação para fazer uma comparação após usarmos Webpack. Inicialmente adicionaremos três novos scripts(content.js, header.js e footer.js) ao nosso projeto e carregá-los na nossa index.html(isso você poderá acompanhar na branch step 4).

O número de requisições é apenas uma parte do desempenho. Também importam o tamanho dos arquivos, o cache e o tempo de execução do JavaScript. As capturas abaixo mostram um experimento de 2019, não um benchmark para projetos atuais.

Uma solução para isso será enviar um único bundle contendo todos os arquivos, agora verificaremos como fazer isso com Webpack primeiro definiremos o nosso webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};
Code language: JavaScript (javascript)

A configuração informa o arquivo de entrada, src/index.js, e o destino do bundle, dist/main.js. O arquivo de entrada importa content.js, header.js e footer.js.

var myContent = require('./js/content');
var myHeader = require('./js/header');
var myFooter = require('./js/footer');
Code language: JavaScript (javascript)

Depois de salvar os arquivos, execute o webpack na raiz do projeto. O comando abaixo usa o modo de desenvolvimento:

npx webpack --mode development

No index.html, substitua as tags dos três scripts originais pelo bundle gerado:

<script src="./dist/main.js"></script>Code language: HTML, XML (xml)

Para gerar a versão de produção, use npx webpack --mode production. Esse fluxo segue a introdução oficial do webpack.

O Webpack irá ler o arquivo index.js e varrer todos os arquivos relacionados e criar um arquivo único simulando uma conexão lenta o resultado será o seguinte:

Então vamos fechando aqui a nossa introdução a webpack, até o momento não efetuamos nenhuma otimização esse post serviu como uma introdução a webpack, nos próximos posts podemos evoluir o nosso projeto e aumentar a sua complexidade. O código final você encontra aqui: https://github.com/fellyph/webpack-tutorial/tree/step-5

Conteúdo relacionado

• Webpack mantendo a qualidade do seu JavaScript
• Introdução a Webpack Parte 2: Loaders
• Introdução ao npm