Webpack

Webpack is a mature, powerful module bundler for JavaScript applications. Despite newer alternatives, it remains the most feature-rich and battle-tested bundler available.

Key Features

• Module Federation: Share code between separate deployments
• Code Splitting: Automatic and manual chunking
• Plugin Ecosystem: 1000+ plugins available
• Loader System: Transform any file type
• Tree Shaking: Remove unused code
• Hot Module Replacement: Update modules without refresh

Installation

pnpm add -D webpack webpack-cli webpack-dev-server

Basic Configuration

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    static: './dist',
    hot: true,
  },
};

Loaders

TypeScript

pnpm add -D ts-loader typescript

{
  test: /\.tsx?$/,
  use: 'ts-loader',
}

CSS/SASS

pnpm add -D style-loader css-loader sass-loader sass

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

Assets

{
  test: /\.(png|jpg|gif|svg)$/,
  type: 'asset/resource',
}

Plugins

HTML Plugin

pnpm add -D html-webpack-plugin

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

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

Mini CSS Extract

pnpm add -D mini-css-extract-plugin

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

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

Code Splitting

Dynamic Imports

// Automatic code splitting
import('./module.js').then(module => {
  module.default();
});

Split Chunks

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },
};

Module Federation

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Performance Optimization

Production Build

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    usedExports: true, // Tree shaking
  },
};

Bundle Analysis

pnpm add -D webpack-bundle-analyzer

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

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

Resources

• Docs: webpack.js.org
• GitHub: webpack/webpack