## glossário

O que é Webpack?

Webpack é um module bundler: uma ferramenta que analisa as dependências do seu projeto e as empacota em um ou poucos arquivos otimizados para o navegador. Ele parte de um ponto de entrada, monta o grafo de tudo que é importado — JavaScript, CSS, imagens, fontes — e gera a saída final.

A necessidade surgiu de uma limitação prática: por muito tempo, navegadores não suportavam módulos, e carregar centenas de arquivos individualmente era inviável em desempenho. O bundler resolveu isso, e no caminho passou a cuidar também de transpilação, minificação e otimização.

Os quatro conceitos centrais

Entry — o arquivo por onde a análise começa; a raiz do grafo de dependências.
Output — onde e com que nome os arquivos gerados serão gravados.
Loaders — transformam arquivos que não são JavaScript em módulos que o Webpack entende: CSS, imagens, TypeScript.
Plugins — atuam sobre o processo inteiro: gerar o HTML, extrair CSS, comprimir, analisar o tamanho do pacote.

Configuração mínima com loaders e plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js', // hash = cache eficiente
    clean: true,
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|svg|jpg|webp)$/, type: 'asset/resource' },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

Otimizações que fazem diferença

O valor do bundler aparece na saída de produção:

Tree shaking — remove código exportado mas nunca usado, reduzindo o tamanho final.
Code splitting — divide o pacote em pedaços carregados sob demanda, em vez de entregar tudo no primeiro acesso.
Minificação — encurta nomes e remove espaços e comentários.
Content hash — inclui um hash do conteúdo no nome do arquivo, permitindo cache agressivo com invalidação automática quando algo muda.
Lazy loading — via import() dinâmico, carrega um módulo apenas quando ele é realmente necessário.

Webpack ainda é a escolha padrão?

Menos do que foi. Ferramentas mais novas — Vite, esbuild, Turbopack, Rspack — são muito mais rápidas por serem escritas em Go ou Rust e por aproveitarem módulos nativos do navegador em desenvolvimento. Webpack permanece por sua maturidade, pelo ecossistema de plugins e pela enorme base instalada. A transpilação que ele orquestra é detalhada no verbete Babel.

## faq

Perguntas frequentes

Qual a diferença entre Webpack e Babel?

Babel traduz a sintaxe de cada arquivo individualmente, convertendo JavaScript moderno em compatível. Webpack junta todos os arquivos e dependências em pacotes otimizados, chamando o Babel via loader durante o processo. Um transforma, o outro empacota.

Preciso configurar Webpack manualmente?

Na maioria dos projetos, não. Next.js, Vite e ferramentas equivalentes já trazem a configuração pronta e otimizada. Mexer diretamente costuma ser necessário só em projetos legados ou em requisitos de build muito específicos.

Como reduzir o tamanho do bundle?

Analise primeiro com webpack-bundle-analyzer para ver o que está pesando. Depois: aplique code splitting por rota, carregue bibliotecas grandes sob demanda, verifique se o tree shaking está funcionando e troque dependências pesadas por alternativas menores.