📦Dev

Gerador Webpack Config

Gera um webpack.config.js mínimo para bundling de aplicações JS modernas.

O esqueleto mínimo que realmente compila

O webpack só faz alguma coisa útil depois que existe um webpack.config.js, e a documentação oficial começa explicando conceitos quando você queria mesmo era o esqueleto do arquivo para adaptar. Resultado previsível: você copia um trecho de um post de 2019, ele usa uma opção que mudou de nome na versão 5, e o build morre com uma mensagem que aponta para lugar nenhum.

O que sai daqui é o mínimo funcional: entry em src/index.js, saída em dist/bundle.js montada com path.resolve, mode production e duas regras de loader. Uma manda os .js fora de node_modules para o babel-loader, a outra passa os .css por css-loader e style-loader. Essa dupla é aplicada da direita para a esquerda, e inverter a ordem quebra o build. Não há campos para editar: o botão devolve sempre o mesmo texto.

Antes de rodar, instale webpack, webpack-cli, babel-loader com @babel/core e @babel/preset-env, além de style-loader e css-loader, e crie um babel.config.js. O mode production já liga minificação e tree shaking; para trabalhar local, troque por development e acrescente devtool source-map. Faltam aqui o devServer e o HtmlWebpackPlugin, que quase todo projeto real acaba querendo. A geração roda no navegador.

Perguntas frequentes

Por que meu CSS não aparece no bundle?

Confira a ordem dentro de use. O css-loader interpreta o arquivo e o style-loader injeta a tag, e o webpack aplica a lista de trás para frente. Garanta também que o CSS é importado por algum JS alcançado pelo entry.

Ainda preciso de webpack?

Nem sempre. Para uma aplicação nova, Vite ou esbuild dão menos trabalho. O webpack continua valendo em base legada, em pipeline de loader muito específico ou quando o time já mantém plugins próprios.

Como gero um build de desenvolvimento?

Troque mode para development, acrescente devtool source-map e rode webpack --watch. Para o navegador recarregar sozinho, instale o webpack-dev-server e adicione a seção devServer.

Ferramentas Relacionadas

🎢

Gerador Rollup Config

Gera um rollup.config.js para empacotar bibliotecas em ESM e CommonJS, com os plugins node-resolve, commonjs e terser já configurados. Bloco fixo, pronto para ajustar.

🚀

Gerador esbuild Config

Gera um esbuild.config.js pronto para builds rápidos, com entry point, bundle, minificação, sourcemap e target já definidos. O formato de saída fica no padrão do esbuild.

🔺

Gerador Prisma Init

Gera um schema.prisma inicial com datasource PostgreSQL e um modelo de exemplo.