Webpack is the most popular JavaScript bundler, transforming your modules and assets into optimized bundles for production. Master Webpack configuration for professional-grade applications.

What is Webpack?

Webpack analyzes your project’s module dependencies and generates optimized static assets. It handles JavaScript, CSS, images, and more through a powerful plugin system.

Core Concepts:

• Entry - Starting point of your application
• Output - Where bundled files are emitted
• Loaders - Transform files (e.g., Babel, CSS)
• Plugins - Perform broader tasks (optimization, injection)
• Mode - Development or production optimizations

Basic Configuration

Install Webpack:

npm install --save-dev webpack webpack-cli webpack-dev-server

webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true // Clean dist folder before build
  }
};

Package.json scripts:

{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development --open"
  }
}

Multiple Entry Points

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js' // app.bundle.js, admin.bundle.js
  }
};

Loaders

Transform files before bundling:

Babel Loader (ES6+ to ES5):

npm install --save-dev babel-loader @babel/core @babel/preset-env

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

CSS Loaders:

npm install --save-dev style-loader css-loader sass-loader sass

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

File Loaders:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash][ext][query]'
        }
      }
    ]
  }
};

Plugins

Extend Webpack functionality:

HTML Webpack Plugin:

npm install --save-dev html-webpack-plugin

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ]
};

Extract CSS Plugin:

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css'
    })
  ]
};

Clean and Copy Plugins:

npm install --save-dev copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public', to: 'public' }
      ]
    })
  ]
};

Development Server

module.exports = {
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
    hot: true, // Hot Module Replacement
    compress: true,
    historyApiFallback: true, // For SPA routing
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

Code Splitting

Split code into smaller chunks:

Dynamic imports:

// Instead of
import { heavyFunction } from './heavy-module';

// Use dynamic import
button.addEventListener('click', async () => {
  const module = await import('./heavy-module');
  module.heavyFunction();
});

Split chunks configuration:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Production Optimization

Full production config:

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
    publicPath: '/'
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      }),
      new CssMinimizerPlugin()
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `npm.${packageName.replace('@', '')}`;
          }
        }
      }
    }
  },
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
};

Environment Variables

npm install --save-dev dotenv-webpack

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv({
      path: './.env',
      safe: true
    })
  ]
};

// Or use webpack.DefinePlugin
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
};

Source Maps

Different options for different needs:

module.exports = {
  // Development - fast rebuild
  devtool: 'eval-cheap-module-source-map',
  
  // Production - separate files
  // devtool: 'source-map',
  
  // Production - inline (not recommended)
  // devtool: 'inline-source-map',
  
  // No source maps
  // devtool: false
};

Aliases and Extensions

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils')
    },
    extensions: ['.js', '.jsx', '.json', '.css', '.scss']
  }
};

// Now import like this:
// import Button from '@components/Button';

Webpack Bundle Analyzer

Visualize bundle size:

npm install --save-dev webpack-bundle-analyzer

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
};

Complete React Configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: './src/index.jsx',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDevelopment 
        ? 'js/[name].js' 
        : 'js/[name].[contenthash].js',
      clean: true
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react'
              ]
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource'
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      !isDevelopment && new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css'
      })
    ].filter(Boolean),
    resolve: {
      extensions: ['.js', '.jsx']
    },
    devServer: {
      static: './dist',
      hot: true,
      port: 3000
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  };
};

Best Practices

1. Use production mode for deployment builds
2. Enable code splitting to reduce initial load
3. Optimize images with appropriate loaders
4. Cache bust with contenthash in filenames
5. Analyze bundle size regularly
6. Use tree shaking by maintaining ES6 modules
7. Lazy load non-critical code

Webpack is powerful but complex. Start with basic configuration, understand loaders and plugins, then optimize for production. The investment pays off with faster, more efficient applications.