Imported from mindrally/skills (webpack-bundler/SKILL.md) via skills.sh. Install upstream with npx skills add mindrally/skills --skill webpack-bundler. Copyright stays with the author.

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

1. Use ES6 module syntax (import/export)
2. Set mode: 'production'
3. 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