webpack-bundler

mindrally

•

6155 months ago

Source Raw

Best practices and guidelines for Webpack module bundler configuration, optimization, and development workflows

Quick Install

npxskills add mindrally/skills--skill webpack-bundler

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360