Webpack

Webpack is a powerful module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules.

Core Concepts

Entry Starting point for building the dependency graph.

Output Where to emit the bundled files.

Loaders Transform files before adding to the bundle.

Plugins Perform wider range of tasks like optimization.

Basic Configuration

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg)$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

Common Loaders

javascript
// Babel for JavaScript
{
  test: /\.js$/,
  use: 'babel-loader',
  exclude: /node_modules/
}

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

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

Popular Plugins

javascript
// HTML generation
new HtmlWebpackPlugin()

// Clean output folder
new CleanWebpackPlugin()

// Environment variables
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
})

// Code splitting
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

Development Server

javascript
devServer: {
  static: './dist',
  hot: true,
  port: 3000
}

Modern Alternatives

Vite: Faster dev server using native ESM
esbuild: Extremely fast bundler
Parcel: Zero-config bundler
Rollup: Optimized for libraries