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.

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 inicialOutput
: o nosso arquivo final geradoLoaders
: para cada categoria de arquivo o Webpack possui umloader
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).

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:

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
Deixe um comentário