Webpack para React: o Guia Final

Published in

Tableless

7 min readDec 7, 2016

O React, criado pelo Facebook, é uma das formas mais modernas de se criar aplicações web.

No último post, falei como Organizar aplicações com React.

Mas agora, vamos aprender a configurar o Webpack, o bundler mais usado pela comunidade React, tanto para um ambiente de desenvolvimento, quanto para produção.

Continue lendo para aprender:

O que é um module bundler
Como funciona o Webpack
Como criar um build de desenvolvimento/produção

Module Bundler

Os browsers atuais foram construídos para interpretar somente HTML, CSS e JavaScript.

Porém, atualmente temos muitas opções para desenvolver aplicações web: TypeScript, ES2015, CoffeeScript, só pra citar alguns exemplos. Por isso pode não fazer mais tanto sentido ficarmos presos na velha combinação HTML, CSS e JavaScript.

E é aí que entra o Webpack.

A função principal dele é analisar o código que você escreveu, independente se for em CoffeeScript, ES2015 ou TypeScript e transformar em JavaScript puro que é entendido pelos browsers.

Não só isso, ele faz a mesma coisa com HTML e CSS.

E mais: ele também é uma ferramenta que nos auxilia no desenvolvimento da aplicação.

Hello World

Pra começar, vamos construir a versão mais simples possível de uma aplicação com React: um Hello World.

Começando um novo projeto com o npm:

mkdir webpack-react-example
cd webpack-react-example
npm init

Aceite todos os valores defaults do npm.

Agora vamos instalar o React:

npm install --save react react-dom

E os pacotes que precisaremos para fazer o build inicial do Webpack:

npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015

Agora, vamos criar o index.html, o arquivo principal de onde a aplicação importará todo o JavaScript referente a aplicação:

Repare na linha 9, onde o arquivo bundle.js é importado.
Esse arquivo (que ainda não existe) será basicamente todo o JavaScript da aplicação, exceto no build de produção que falarei mais pra frente.

Pra que esse arquivo seja criado, precisaremos do Webpack. Portanto vamos criar o arquivo webpack.config.js, que será o arquivo de configuração do Webpack:

Essa é a configuração mínima para uma aplicação com Webpack.
Ela precisa de um arquivo de entrada (entry) e um de saída (output).

No caso estamos apontando para o arquivo app.js (que ainda vamos criar) e ele vai gerar automaticamente o arquivo bundle.js, que já falamos anteriormente.

Vamos também alterar o package.json, para que possamos rodar o Webpack e gerar o build:

Repare na linha 7. Para rodarmos o Webpack, precisamos de um simples:

npm start

Agora vamos criar o arquivo que falta, o app.js, que terá o Hello World em React:

Esse código, apesar de muito simples, possui duas limitações que nossos browsers não conseguem interpretar:

Código em React
Código em ES2015

Por isso precisamos voltar em nosso arquivo de configuração do Webpack para usar loaders que transformem esse código em JavaScript puro que é entendido pelos browsers:

Pode ter ficado complicado agora, mas vamos passo a passo.

Primeiro, vamos pegar todos os arquivos que terminem com .js:

test: /\.js$/

Depois, vamos excluir todos os arquivos que vem da pasta node_modules, porque não faz sentido tocarmos em libs externas:

exclude: /node_modules/

Agora, basta informarmos que vamos usar o Babel como loader principal:

loader: 'babel'

E pra fechar, vamos setar os dois loaders que precisamos, o babel-preset-es2015, e o babel-preset-react:

query: {
  presets: ['react', 'es2015']
}

Pronto. Agora basta digitar o comando para rodar o Webpack:

npm start

E abrir o arquivo index.html para visualizar o Hello World:

Melhorando o build de desenvolvimento

Agora que já temos uma versão mínima, vamos melhorar o ambiente de desenvolvimento adicionando o servidor do Webpack, que rodará a aplicação em alguma porta do localhost, para que não precisemos abrir o index.html na mão.

Para isso, vamos instalar o servidor:

npm install --save-dev webpack-dev-server

E agora basta mudarmos uma linha no package.json:

"scripts": {
  "start": "webpack-dev-server"
},

Agora só falta digitar o mesmo comando anterior:

npm start

Podemos visualizar a aplicação em localhost:

Mas ainda podemos fazer bem mais do que isso, com um simples comando.

Hot Reload

Se desejarmos que toda vez que modificamos um arquivo, o browser seja automaticamente atualizado com essa mudança, sem a necessidade de um refresh manual, podemos alterar o package.json dessa forma:

"scripts": {
  "start": "webpack-dev-server --inline --hot"
},

Agora, falta apenas mais um detalhe para ter uma versão completa do ambiente de desenvolvimento.

Vamos instalar um plugin para adicionar o bundle do JavaScript que é gerado automaticamente no index.html:

npm install --save-dev html-webpack-plugin

Vamos remover a inserção manual do bundle.js:

E alterar a configuração do Webpack para utilizar o plugin:

Pra entender melhor essas alterações:

Na linha 1 importamos o plugin
Na linha 3 configuramos o plugin para injetar o bundle.js no arquivo index.html
Na linha 22 dizemos pro Webpack que estamos utilizando o plugin

E com isso temos uma versão bem completa de um ambiente de desenvolvimento com React e Webpack.

Se precisar de mais mudanças, como: alterar a porta ou rodar o servidor com https, basta ler a documentação do servidor do Webpack.

Separando as configurações

Antes de começarmos a desenvolver o build de produção da aplicação, vamos aprender a separar arquivos de configuração do Webpack da forma mais simples possível.

Primeiro vamos renomear o arquivo do build de desenvolvimento que já criamos de webpack.config.js para webpack.dev.config.js:

Agora, vamos criar novamente o arquivo webpack.config.js e colocar o seguinte código:

Pode ter ficado confuso, então vamos por partes.

Primeiro importamos a configuração do ambiente de desenvolvimento, que já havíamos criado:

var devConfig = require('./webpack.dev.config.js');

Depois criamos um switch que irá ler qual comando npm usamos:

switch (process.env.npm_lifecycle_event)

E depois criamos um case para cada cenário possível. Como por enquanto, ainda não criamos o build de produção, apenas o de desenvolvimento será usado.

Build de produção

Pra começar, vamos alterar o package.json, para adicionar um npm script que invoque o build de produção:

Agora, vamos pro arquivo principal do Webpack e adicionar o novo cenário:

Basta criarmos o arquivo novo de configuração para o ambiente de produção (webpack.prod.config.js), e pra isso vamos usar como base o arquivo de desenvolvimento:

Variável de Ambiente

A primeira diferença do build de produção que vamos fazer é adicionar uma variável de ambiente de produção. Não precisaremos instalar nenhum plugin externo, o Webpack já vem com essa possibilidade built-in.

Repare nas linhas 4 até 8:

Minificação

Agora vamos adicionar a minificação dos arquivos. Com o Webpack isso é extremamente fácil, basta uma linha com o UglifyJsPlugin.

Repare na linha 10:

Dedupe

Ao usar bibliotecas externas, como o lodash, o seu código pode ter dependências duplicadas. O Webpack pode encontrar essas dependências duplicadas e remover as redundâncias com o DedupePlugin.

Repare na linha 11:

Code Splitting

Em algumas circunstâncias, especialmente em aplicações grandes, não é muito eficiente colocar todo o JavaScript num arquivo único.

Como as circunstâncias variam de aplicação para aplicação, vou mostrar o caso mais comum de code splitting com o Webpack: separar o código da sua aplicação do código de bibliotecas externas, para isso vamos usar o CommonChunksPlugin.

Linhas 12 até 20:

Essa parte é um pouco mais complicada, então vou explicar linha a linha.

Na linha 12, configuramos o CommonChunks pra ser nomeado como vendor, que é uma string comum quando queremos nos referir a pacotes externos.

Na linha 15, separamos os arquivos de entrada (entry) em dois:

app (o próprio código que escrevemos)
vendor (bibliotecas externas, no nosso caso react e react-dom)

E por último, alteramos a linha 20, para que o filename seja dinâmico.

Com isso, temos os dois arquivos importados automaticamente no nosso index.html:

Caching

Uma das vantagens de se separar em múltiplos arquivos, citado no passo anterior, é o cache.

Por exemplo, se fizermos alguma alteração no código da nossa aplicação, o usuário final não precisa fazer o download novamente das bibliotecas externas, mas somente do novo código que foi adicionado.

Para que isso funcione, precisamos apenas adicionar chunkhashes nos JavaScripts finais.

Linhas 12 a 20:

E com isso temos um build final de produção feito com o Webpack.

Se desejar ver o código completo da aplicação que foi construída, é só entrar aqui.

Se você gostou do post não se esqueça de dar um ❤ aqui embaixo!
E se quiser receber de antemão mais posts como esse, assine nossa newsletter.

Seja um apoiador, doe BitCoins: 1BGVKwjwQxkr3w1Md2X8WHAsyRjDjyJiPZ

JSCasts

É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente criamos o JSCasts, onde você vai se manter em dia com o JavaScript e todo o seu ecossistema de forma fácil e interativa.