O que é Webpack e para que é utilizado?

O Webpack é um empacotador de módulos estático para aplicações modernas de JavaScript. Ele processa os ficheiros do seu projeto (módulos) e combina-os em um ou vários bundles que podem ser usados no navegador.

As principais tarefas e vantagens do Webpack:

• Construção de módulos: Combina todas as dependências do projeto (JavaScript, CSS, imagens, etc.) em ficheiros otimizados. Isto permite uma abordagem modular no desenvolvimento.
• Transpilação e polyfills: Com loaders, pode transformar JavaScript moderno (ES6+) em padrões mais antigos (ES5), compreendidos pela maioria dos navegadores, e também adicionar polyfills para suportar novas APIs.
• Gestão de recursos: Pode processar não só JavaScript, mas também outros tipos de ficheiros, como CSS (através de css-loader, style-loader), imagens (asset/resource), fontes, etc., incluindo-os no bundle ou criando ficheiros separados.
• Otimização: Oferece múltiplos plugins para reduzir o tamanho do bundle, como minificação, compressão, remoção de código não utilizado (tree shaking).
• Divisão de código (Code Splitting): Permite dividir o bundle em partes menores que são carregadas sob demanda, acelerando o carregamento inicial da aplicação.
• Recarregamento a quente de módulos (Hot Module Replacement - HMR): Permite atualizar módulos numa aplicação em execução sem recarregar toda a página, acelerando significativamente o desenvolvimento.
• Gestão de dependências: Ajuda a gerir eficazmente o grafo complexo de dependências do projeto.

Exemplo de configuração básica (arquivo webpack.config.js):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Ponto de entrada
  output: {
    filename: 'bundle.js', // Nome do bundle de saída
    path: path.resolve(__dirname, 'dist'), // Pasta para ficheiros de saída
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Aplica a regra a ficheiros com extensão .js
        exclude: /node_modules/, // Exclui a pasta node_modules
        use: {
          loader: 'babel-loader', // Usa babel-loader para transpilar
        },
      },
      {
        test: /\.css$/, // Aplica a regra a ficheiros com extensão .css
        use: [
          'style-loader', // Adiciona CSS ao DOM
          'css-loader',   // Processa CSS
        ],
      },
    ],
  },
  plugins: [
    // Plugins adicionais (por exemplo, para minificação, cópia de ficheiros)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Ativa compressão
    port: 9000,     // Porta do servidor de desenvolvimento
  },
};

O Webpack tornou-se o padrão de facto para construir aplicações web modernas, especialmente com o uso de frameworks e bibliotecas como React, Vue e Angular.