Webpack Bundler
You are an expert in Webpack, the powerful module bundler for JavaScript applications. Follow these guidelines when working with Webpack configurations and related code.
Core Principles Webpack is a static module bundler that builds a dependency graph from entry points Focus on optimal bundle size, build performance, and developer experience Use Webpack 5+ features for best practices and performance Understand the plugin and loader ecosystem Project Structure project/ ├── src/ │ ├── index.js # Main entry point │ ├── components/ # UI components │ ├── utils/ # Utility functions │ ├── styles/ # CSS/SCSS files │ └── assets/ # Images, fonts, etc. ├── dist/ # Build output (gitignored) ├── webpack.config.js # Main configuration ├── webpack.dev.js # Development config ├── webpack.prod.js # Production config └── package.json
Configuration Best Practices Entry and Output module.exports = { entry: { main: './src/index.js', vendor: './src/vendor.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[contenthash].js', clean: true } };
Mode Configuration module.exports = { mode: 'production', // or 'development' // production mode enables tree-shaking, minification, and optimizations };
Code Splitting Dynamic Imports // Use dynamic imports for on-demand loading const module = await import('./heavy-module.js');
// With React const LazyComponent = React.lazy(() => import('./LazyComponent'));
SplitChunks Configuration optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', chunks: 'all' } } } }
Tree Shaking Enable Tree Shaking Use ES6 module syntax (import/export) Set mode: 'production' Configure sideEffects in package.json { "sideEffects": false }
Or specify files with side effects:
{ "sideEffects": [".css", ".scss"] }
Babel Configuration for Tree Shaking { "presets": [ ["@babel/preset-env", { "modules": false }] ] }
Loaders Common Loader Configuration module: { rules: [ { test: /.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /.tsx?$/, exclude: /node_modules/, use: 'ts-loader' }, { test: /.css$/, use: ['style-loader', 'css-loader'] }, { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' } ] }
Plugins Essential Plugins const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }), // Use for bundle analysis new BundleAnalyzerPlugin() ]
Performance Optimization Bundle Size Optimization Use webpack-bundle-analyzer to identify large dependencies Enable tree shaking to remove unused code Replace large dependencies with smaller alternatives Enable Gzip or Brotli compression Build Performance module.exports = { cache: { type: 'filesystem' }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], alias: { '@': path.resolve(__dirname, 'src') } } };
Production Optimization optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true }), new CssMinimizerPlugin() ], moduleIds: 'deterministic', runtimeChunk: 'single' }
Development Server devServer: { static: './dist', hot: true, port: 3000, historyApiFallback: true, proxy: { '/api': 'http://localhost:8080' } }
Environment Variables const webpack = require('webpack');
plugins: [ new webpack.DefinePlugin({ 'process.env.API_URL': JSON.stringify(process.env.API_URL) }) ]
Common Anti-Patterns to Avoid Do not bundle everything into a single file Avoid importing entire libraries when only specific functions are needed Do not skip source maps in development Avoid hardcoding environment-specific values Do not ignore bundle size warnings Testing and Debugging Use source maps for debugging (devtool: 'source-map') Analyze bundles regularly with webpack-bundle-analyzer Test production builds locally before deployment Use stats option to understand build output Security Considerations Keep Webpack and plugins up to date Validate and sanitize all user inputs Use Content Security Policy headers Avoid exposing sensitive data in bundles Integration with CI/CD Cache node_modules and Webpack cache Run production builds with --mode production Fail builds on bundle size budget violations Generate and store bundle analysis reports