Ferramentas de Build, Bundlers e Editores

Webpack Fundamentals Cheat Sheet

Configuração de entry, output, loaders e plugins básicos no Webpack.

Configuração

Ponto de entrada principal da aplicação.

module.exports = { entry: './src/index.js' };

Destino e nome do arquivo gerado.

output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }

Uso de loaders para processar arquivos CSS.

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

Uso de plugins para estender funcionalidades.

plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]

Define otimizações automáticas baseadas no ambiente.

mode: 'production' | 'development'

Configuração do servidor de desenvolvimento.

devServer: { static: './dist', hot: true }