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