Introdução ao Webpack: Parte 2

() translation by (you can also view the original English article)

No tutorial anterior vimos como criar e configurar o ambiente de um projeto com o Webpack além de utilizar os loaders para processar nosso JavaScript. Mas, onde o Webpack realmente se destaca, é na sua abilidade juntar outros tipos de arquivos como CSS ou imagens, e incluir no projeto apenas quando necessário. Vamos começar colocando um pouco de estilo na nossa página.

Style Loaders

Primeiro, crie um arquivo CSS em um diretório de estilos. Nomeie o arquivo como main.css e adicione uma regra de estilo para o elemento heading.

1	h2 {
2	background: blue;
3	color: yellow;
4	}

Agora, como podemos incluir esse estilo na nossa página? Bom, como a maioria das soluções do Webpack, vamos precisar de mais um loader. Dois na verdade: o css-loader e o style-loader. O primeiro lê todo os estilos CSS dos seus arquivos, enquanto o outro inclui os estilos na página HTML. Para instala-los:

1	npm install style-loader css-loader

Agora, vamos ver como podemos utiliza-los. No arquivo webpack.config.js, vamos adicionar outro objeto na array de loaders. Nele, vamos adicionar um teste para requisitar apenas arquivos CSS para utilizar com os loaders.

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}

Algo interessante neste código é a linha que contém 'style!css'. Os loaders carregam da esquerda para direita, então basicamente esta linha está dizendo para ler qualquer arquivo com o final .css, e depois incluir os estilos na nossa página.

Como atualizamos nosso arquivo de configuração, vamos precisar reiniciar o servidor de desenvolvimento para as mudanças surtirem efeito. Pressiona ctrl+c para parar o serviço do server e depois entre com o comando webpack-dev-server para iniciar o server novamente.

Tudo que precisamos fazer agora é requisitar os arquivos de estilo a partir do arquivo main.js. Isso é feito como se você estivesse requisitando qualquer outro modulo JavaScript:

const sayHello = require('./say-hello');

require('./styles/main.css');

sayHello('Guybrush', document.querySelector('h2'));

Note que ainda sequer editamos o arquivo index.html. Abra a página no navegador para visualizar o h2 com estilo. Mude a cor do heading no arquivo de estilo para ver as alterações surtirem efeito instantâneamente. Demais.

Agora é a vez do Sass

"Ninguém utiliza CSS hoje em dia, vô! Apenas Sass". É mais ou menos isso. O Webpack também tem um loader para essa situação. Instale o loader junto com a versão do Sass para o node, com o comando:

1	npm install sass-loader node-sass

Depois, atualize o arquivo webpack.config.js:

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}

O código acima converte qualquer arquivo com extensão .scss para CSS puro, lê os estilos, e os insere nos estilos da página. Lembre-se de renomear o arquivo main.css para main.scss, e de requisitar o arquivo correto. Um pouco de Sass:

$background: blue;

h2 {
    background: $background;
    color: yellow;
}

main.js:

1	require('./styles/main.scss');

Legal. E simples assim mesmo. Sem conversão de arquivos e monitoramento de pastas. Apenas requisitamos os estilos Sass diretamente.

Imagens

"Para imagens, vamo utilizar um loader também?" Claro! Para imagens, vamos utilizar o url-loader. Esse loader pega o caminho da imagem (url) e o atualiza para direcionar o arquivo correto no pacote de saída. (bundle). Como sempre:

1	npm install url-loader

Agora, vamos tentar algo diferente no nosso arquivo webpack.config.js. Adicione outra entrada no array dos loaders, de maneira padrão, mas desta vez vamos utlizar uma expressão para retornar imagens de diferentes formatos, a partir da extensão do arquivo.

{
    test: /\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}

Note a diferença aqui. Não estamos utilizando a chave exclude. Ao invés dela, estamos utilizando o include. É mais eficiente, já que diz ao webpack para ignorar qualquer coisas que não esteja na pasta chamada "images".

Normalmente você utiliza algum tipo de sistema de template para criar as views dos seus arquivos HTML, mas não vamos complicar o exemplo então vamos utilizar uma tag de imagem com JavaScript. Primeiro, crie um elemento de imagem, atribua a imagem ao atributo src, e depois adicione o elemento na página.

var imgElement = document.createElement('img');

imgElement.src = require('./images/my-image.jpg');

document.body.appendChild(imgElement);

Volte no navegador para ver a imagem.

Preloaders

Outra tarefa muito eficiente durante o desenvolvimento é o linting. Linting é uma maneira de analisar potenciais erros no código checando se você seguiu as regras padrões da linguagem. Coisas como utilziar uma variável antes de declarar esta ou esquecer o ponto e vírgula ao final de uma linha. Com essas regras, podemos evitar problemas futuros.

O JSHint é uma ferramenta muito popular de linting. Ele analisa seu código e apresenta potenciais erros. O JSHint pode ser executado manulmente no terminal, mas pode se tornar uma tarefa repetitiva durante o desenvolvimento. A ideia é rodar o JSHint automaticamente sempre que salvarmos um arquivo. Nosso servidor do Webpack já está monitorando mudanças de arquivos, então, vamos configurar um novo loader.

Instale o jshint-loader da maneira padrão:

1	npm install jshint-loader

Novamente, temos que configurar o Webpack para utilizar o recurso, editando o arquivo webpack.config.js. No entanto, esse loader é um pouco diferente dos outros. Ele não transforma nenhum código, apenas analisa o arquivo. Também não queremos que todo nosso código modificado apresente falha por causa de um ponto e vírgula. Para isso existem os preloaders. Um preloader é uma tarefa que configuramos para rodar antes das tarefas principais. São adicionados ao webpack.conf.js de uma maneira similar aos loaders.

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

Agora o processo do linting é executado e apresenta imediatamente uma falha se algum problema é detectado. Antes de reiniciar nosso servidor, precisamos dizer ao JSHint que estamos utilizando o padrõa ES6, caso contrário será apresentada falha ao se deparar com a palavra const.

Após a chave do módulo na configuração, adicione outra entrada chamada "jshint" e uma linha para especificar a versão do JavaScript.

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

Salve o arquivo e reinicie o webpack-dev-server. Tudo OK? Bom. Isso significa que seu código não contém erros. Vamos criar um erro removendo o ponto e vírgula de uma linha, conforme o exemplo:

1	var imgElement = document.createElement('img')

Salve o arquivo e dê uma olhada no processo do terminal. A seguinte informação é apresentada:

1	WARNING in ./main.js
2	jshint results in errors
3	Missing semicolon. @ line 7 char 47

Obrigado, JSHint!

Se preparando para o ambiente de produção

Agora nosso workflow está configurado do jeito que precisamos, precisamos preparar o projeto para o ambiente real. Uma das coisas mais importantes antes de colocar o seu projeto online, é minificação e concatenação de arquivos além da compressão destes. Antes de continuarmos, de uma olhada no arquivo bundle.js. É fácil de ler, tem muito espaço em branco e apenas 32kb de tamanho.

"Espere! Não me diga. Outro loader, certo?" Não! Nesta rara ocasião, não vamos utilizar um loader. O Webpack possui um recurso nativo para minificar arquivos. Assim que seu código estiver pronto, execute o comando:

1	webpack -p

A flah -p diz ao Webpack para preparar nosso código para o ambiente de produção. Como será gerado o pacote (bundle), ele é otimizado ao máximo. Após executar o comando, abra o arquivo bundle.js e você vai notar que todo espaço em branco do código foi removido, e com um tamanho muito menor do que o arquivo anterior, apenas 10kb.

Sumário

Espero que a segunda parte do tutorial tenha dado cofiança para utilizar o Webpack nos seus projetos. Lembre-se, se houver algo que você queira fazer durante o build process, é bem provável que existe um loader para isso. Todos os loaders são instalados via npm, dê uma olhada se alguém já não criou algo que você precisa antes de tudo.

Boa sorte e se divirta!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!