Entendendo os conceitos do webpack

Ao se trabalhar com diversas libs e frameworks JavaScript não temos muito contato com o webpack, já que ferramentas como o @angular/cli, create-react-app e vue-cli já criam a estrutura do projeto e configurações pré definidas deixando o webpack transparente para os desenvolvedores. A versão 4 do webpack não necessita mais de um arquivo de configuração, mas dependendo da necessidade do projeto é preciso fazer certas configurações para obter um melhor resultado no empacotamento de módulos. Nesse caso devemos conhecer os conceitos básicos para uma melhor utilização e configuração do webpack.

O que é o webpack?

O webpack é um empacotador de módulos estáticos para aplicações JavaScript modernas. Ao processar a aplicação o webpack gera um gráfico que mapeia cada módulo e suas dependências e gera um ou mais pacotes.

Conceitos principais

Entry

Ponto de entrada que indica qual módulo o webpack deve usar para iniciar a construção do gráfico interno de dependência. Ao definir um ponto de entrada, o webpack irá encontrar todas a dependências e fazer a importação. Por padrão o ponto de entrada é definido no arquivo ./src/index.js, mas é possível definir um arquivo diferente ou até mesmo múltiplos pontos de entrada no arquivo de configuração webpack.config.js.
exemplo de configuração do entry:

module.exports = {  
   entry: './path/to/my/entry/file.js'  
}

Existem múltiplas formas de definir o ponto de entrada na configuração do webpack, para outras formas de definição, veja a documentação oficial.

Output

A propriedade Output define o nome e local do pacote gerado pelo webpack. O diretório padrão é o ./dist e o arquivo ./dist/main.js. Para configurar, devemos definir um objeto output com as propriedades path e filename no arquivo de configuração do webpack:

module.exports = {  
  entry: './path/to/my/entry/file.js'  
  output: {  
    path: path.resolve(\_\_dirname, 'dist'),  
    filename: 'webpack.bundle.js'  
  }  
}

Essa configuração irá gerar um diretório dist na raiz do projeto e o arquivo webpack.bundle.js dentro do diretório dist. A variável do nodejs __dirname contém o nome do diretório onde se encontra o módulo atual. A propriedade Output possui diversas configurações e para um aprofundamento nos conceitos veja esse link.

Loaders

Por padrão o webpack só entende arquivos JavaScript, para que ele possa entender outros tipos de arquivos devemos usar os Loaders que são módulos que podem ser instalados separadamente possibilitando que o webpack converta esses arquivos em módulos válidos e os adicione ao gráfico de dependência. Os Loaders também são utilizados para converter JavaScript de uma versão para outra. Para incluirmos os Loaders criamos uma nova seção module no arquivo de configuração, nessa seção podemos definir uma ou mais rules:

const path = require('path')   
const config = {  
  output: {  
    filename: 'my-first-webpack.bundle.js'  
  },  
  modules: {  
    rules: \[  
      {test: /\\.txt$/, use: 'raw-loader'}  
    \]  
  }  
}

Essa regra diz ao compilador do webpack para quando for encontrado um arquivo ‘.txt’ dentro de uma declaração require ou import, deve se usar o raw-loader para transformá-lo antes de adicioná-lo ao pacote. Cada regra possui duas propriedades obrigatórias:

• test: define quais arquivos serão filtrados
• use: define qual módulo será usado

Vamos filtrar todos arquivos css e dizer ao módulo para usar o css-loader:

const path = require('path')   
const config = {  
  output: {  
    filename: 'my-first-webpack.bundle.js'  
  },  
  modules: {  
    rules: \[  
      {test: /\\.css$/, use: 'css-loader'}  
    \]  
  }  
}

Na propriedade test usamos expressão regular para encontrar os arquivos css. As barras / e / indicam que tudo entre elas é uma expressão regular, em seguida temos \. onde usamos a barra invertida (escape) para definir o ponto (.) pois sem a barra de escape ele iria corresponder a qualquer caractere. Após o ponto vem o texto “css” e em seguida o $ que define o fim do texto. Com isso nossa expressão regular irá filtrar todos os arquivos com a extensão .css e usar o css-loader para carregá-los.

Plugins

Os plugins servem para executar uma variedade de tarefas como otimização de pacotes, gerenciamento de assets e injeção de variáveis de ambiente. Plugins são definidos em duas partes no arquivo de configuração, no topo do arquivo para plugins externos e na seção plugins dentro da seção module:

// instalado via npm  
const HtmlWebpackPlugin = require('html-webpack-plugin');   
//plugins internos  
const webpack = require('webpack');   
cosnt config = {  
  module: {  
    rules: \[  
      {test: /\\.css$/, use: 'css-loader'}  
    \]  
  },  
  plugins: \[  
    new HtmlWebpackPlugin({template: './src/index.html'})  
  \]  
};

module.exports = config;

No código acima, o plugin html-webpack gera um arquivo html e faz a injeção automática do pacote gerado. O webpack possui diversos plugins internos, confira a lista.

Mode

No atributo mode é definido o mode de execução do webpack como produção, desenvolvimento ou nenhum. De acordo com a opção definida o webpack ativa otimizações específicas. O ambiente padrão é produção:

module.exports = {  
  mode: 'production'  
}

Com isso finalizamos a abordagem conceitual do webpack, em um post futuro vamos ver o funcionamento do webpack na prática. Até a próxima!