Blog fellyph cintra - logo on white bg

Introdução a Webpack

Esse post é uma introdução a Webpack o static module bundler ou numa tradução genérica um “empacotador de módulos”, mas o que isso significa? Webpack vai gerenciar a leitura de arquivos CSS, JavaScript e assets do seu projeto, empacotando esse conteúdo para desenvolvimento ou produção.

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.

Introdução a webpack
Introdução a webpack

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.

Veremos nessa introdução a webpack que ele trabalha apenas com o carregamento de JavaScript, mas podemos instalar recursos necessários para trabalhar com CSS, imagens, arquivos SASS, LESS e TypeScript. Esses recursos são chamados loaders que veremos em breve.

Atualmente na versão 4 Webpack este entre as principais ferramentas de configuração de ambiente, anteriormente ocupadas pelo Gulp e o Grunt. O que impulsionou a sua popularidade foi a adoção por grandes CLI’s do mercado, com angular-cli e create-react-app conseguimos abstrair toda a complexidade de realizar a configuração inicial de projetos com Angular ou React e Webpack é um grande responsável por toda essa mágica por trás dos CLIs.

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:

Temos um arquivo index.html e dentro da pasta SRC temos uma index.js - introdução a webpack
Temos um arquivo index.html e dentro da pasta SRC temos uma index.js – introdução a webpack

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
Verificando a versão do node - introdução a webpack
Verificando a versão do node – introdução a webpack

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
Inicializando o projeto - introdução a webpack
Inicializando o projeto – introdução a webpack

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:

Terminal exibindo a instalação
Terminal exibindo a instalação

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).

arquivos carregados no google chrome dev tools
Simulando uma conexão lenta o resultado será o seguinte. Temos 4 requisições durando um total de 4,29 segundos.

Uma ação de melhorar a desempenho de um website é reduzir o número de requisições, em navegadores modernos e conexões HTTP2 isso não tão visível. Quando não temos esses recursos temos uma limitação de requisições em paralelo isso causa um efeito cascata aumentando o tempo de carregamento.

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)

No arquivo acima tempos temos instruções qual é o arquivo de entrada neste caso o index.js e qual arquivo será gerado na pasta dist o arquivo main.js. O nosso index.js importa os três arquivos, 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)

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:

image do google chrome dev tools
Agora temos duas requisições 2 requisições em 4.24 segundos.

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

Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *