JavaScript Tooling

Webpack

Module bundler for JavaScript applications

Find videos you like?

Save to resource drawer for future reference!

What is Webpack?

Webpack is a module bundler that takes all your JavaScript files, CSS, images, and other assets, and bundles them into optimized files for the browser. It transforms, bundles, and packages your code for production.

Bundle Files

Combines multiple files into one

Transform Code

Convert modern JS to browser-compatible

Optimize Assets

Minify, compress, and optimize

Core Concepts

Four key concepts in Webpack

Entry

Starting point where Webpack begins bundling

entry: './src/index.js'

Output

Where to save the bundled files

output: './dist/bundle.js'

Loaders

Transform non-JS files (CSS, images, TS)

use: 'babel-loader'

Plugins

Perform advanced tasks (minification, optimization)

new HtmlWebpackPlugin()

Example 1: Basic Webpack Configuration

Simple webpack.config.js setup

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

module.exports = {
  // Entry point
  entry: './src/index.js',
  
  // Output configuration
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true  // Clean dist folder before each build
  },
  
  // Mode: development or production
  mode: 'development',
  
  // Dev server
  devServer: {
    static: './dist',
    port: 3000,
    hot: true  // Hot module replacement
  }
};

// Run with:
// npx webpack              (build)
// npx webpack serve        (dev server)

Example 2: Using Loaders

Processing CSS, images, and Babel

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  
  module: {
    rules: [
      // JavaScript with Babel
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      
      // CSS files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      
      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      },
      
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

// Install loaders:
// npm install --save-dev babel-loader @babel/core @babel/preset-env
// npm install --save-dev style-loader css-loader

Example 3: Using Plugins

HTML generation and optimization

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',  // Cache busting
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  
  plugins: [
    // Generate HTML file
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'My App',
      minify: true
    }),
    
    // Extract CSS to separate file
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // Instead of style-loader
          'css-loader'
        ]
      }
    ]
  }
};

// Install:
// npm install --save-dev html-webpack-plugin
// npm install --save-dev mini-css-extract-plugin

Example 4: Production Configuration

Optimized build for deployment

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

module.exports = {
  mode: 'production',
  
  entry: './src/index.js',
  
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    
    // Code splitting
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    },
    
    // Runtime chunk
    runtimeChunk: 'single'
  },
  
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
};

Common Use Cases

What Webpack helps you do

✅ Bundle Modules

Combine hundreds of files into one or few bundles

✅ Transform Code

ES6+ to ES5, TypeScript to JavaScript, SCSS to CSS

✅ Code Splitting

Split code into chunks loaded on demand

✅ Hot Reload

See changes instantly without full page reload

✅ Asset Management

Handle images, fonts, CSS with ease

✅ Optimization

Minify, tree shake, compress for production

Webpack Best Practices

Tips for effective bundling

✅ Do

• Use separate dev & prod configs
• Enable source maps for debugging
• Use contenthash for cache busting
• Split vendor and app code
• Enable tree shaking in production
• Use compression plugins
• Monitor bundle sizes
• Use webpack-bundle-analyzer

❌ Don't

• Bundle node_modules unnecessarily
• Ignore bundle size warnings
• Use same config for dev & prod
• Forget to minify in production
• Skip optimization settings
• Include dev tools in production
• Overcomplicate configuration
• Ignore loader order

Key Takeaways

📦

Module Bundler

Combines files for browser
Optimizes for production

🔧

Loaders & Plugins

Loaders transform files
Plugins optimize output

⚙️

Configuration

webpack.config.js
Entry, output, rules, plugins

🚀

Dev Experience

Hot module replacement
Fast development server

Industry Standard

Webpack is the most popular JavaScript bundler. It powers React, Vue, Angular, and thousands of production apps!

Previous Topic

package.json

Managing dependencies and scripts.

Next Topic

Vite

Lightning-fast build tool for modern web projects.

Ask a Question

Have a question about Webpack? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Tooling

Webpack

Module bundler for JavaScript applications

Find videos you like?

Save to resource drawer for future reference!

What is Webpack?

Bundle Files

Combines multiple files into one

Transform Code

Convert modern JS to browser-compatible

Optimize Assets

Minify, compress, and optimize

Core Concepts

Four key concepts in Webpack

Entry

Starting point where Webpack begins bundling

entry: './src/index.js'

Output

Where to save the bundled files

output: './dist/bundle.js'

Loaders

Transform non-JS files (CSS, images, TS)

use: 'babel-loader'

Plugins

Perform advanced tasks (minification, optimization)

new HtmlWebpackPlugin()

Example 1: Basic Webpack Configuration

Simple webpack.config.js setup

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

module.exports = {
  // Entry point
  entry: './src/index.js',
  
  // Output configuration
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true  // Clean dist folder before each build
  },
  
  // Mode: development or production
  mode: 'development',
  
  // Dev server
  devServer: {
    static: './dist',
    port: 3000,
    hot: true  // Hot module replacement
  }
};

// Run with:
// npx webpack              (build)
// npx webpack serve        (dev server)

Example 2: Using Loaders

Processing CSS, images, and Babel

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  
  module: {
    rules: [
      // JavaScript with Babel
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      
      // CSS files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      
      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      },
      
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

// Install loaders:
// npm install --save-dev babel-loader @babel/core @babel/preset-env
// npm install --save-dev style-loader css-loader

Example 3: Using Plugins

HTML generation and optimization

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',  // Cache busting
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  
  plugins: [
    // Generate HTML file
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'My App',
      minify: true
    }),
    
    // Extract CSS to separate file
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // Instead of style-loader
          'css-loader'
        ]
      }
    ]
  }
};

// Install:
// npm install --save-dev html-webpack-plugin
// npm install --save-dev mini-css-extract-plugin

Example 4: Production Configuration

Optimized build for deployment

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

module.exports = {
  mode: 'production',
  
  entry: './src/index.js',
  
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    
    // Code splitting
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    },
    
    // Runtime chunk
    runtimeChunk: 'single'
  },
  
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
};

Common Use Cases

What Webpack helps you do

✅ Bundle Modules

Combine hundreds of files into one or few bundles

✅ Transform Code

ES6+ to ES5, TypeScript to JavaScript, SCSS to CSS

✅ Code Splitting

Split code into chunks loaded on demand

✅ Hot Reload

See changes instantly without full page reload

✅ Asset Management

Handle images, fonts, CSS with ease

✅ Optimization

Minify, tree shake, compress for production

Webpack Best Practices

Tips for effective bundling

✅ Do

• Use separate dev & prod configs
• Enable source maps for debugging
• Use contenthash for cache busting
• Split vendor and app code
• Enable tree shaking in production
• Use compression plugins
• Monitor bundle sizes
• Use webpack-bundle-analyzer

❌ Don't

• Bundle node_modules unnecessarily
• Ignore bundle size warnings
• Use same config for dev & prod
• Forget to minify in production
• Skip optimization settings
• Include dev tools in production
• Overcomplicate configuration
• Ignore loader order

Key Takeaways

📦

Module Bundler

Combines files for browser
Optimizes for production

🔧

Loaders & Plugins

Loaders transform files
Plugins optimize output

⚙️

Configuration

webpack.config.js
Entry, output, rules, plugins

🚀

Dev Experience

Hot module replacement
Fast development server

Industry Standard

Webpack is the most popular JavaScript bundler. It powers React, Vue, Angular, and thousands of production apps!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

package.json

Vite

JavaScript Code Editor

Building Your Learning Module...

Webpack

What is Webpack?

Bundle Files

Transform Code

Optimize Assets

Entry

Output

Loaders

Plugins

✅ Bundle Modules

✅ Transform Code

✅ Code Splitting

✅ Hot Reload

✅ Asset Management

✅ Optimization

✅ Do

❌ Don't

Key Takeaways

Module Bundler

Loaders & Plugins

Configuration

Dev Experience

Industry Standard

package.json

Vite

JavaScript Code Editor

Webpack

What is Webpack?

Bundle Files

Transform Code

Optimize Assets

Entry

Output

Loaders

Plugins

✅ Bundle Modules

✅ Transform Code

✅ Code Splitting

✅ Hot Reload

✅ Asset Management

✅ Optimization

✅ Do

❌ Don't

Key Takeaways

Module Bundler

Loaders & Plugins

Configuration

Dev Experience

Industry Standard