Webpack — Explained with Examples

Webpack is a JavaScript bundler that processes modules with loaders and plugins, producing optimized bundles with code splitting and asset management.

Webpack takes modules with dependencies (JavaScript, CSS, images, fonts) and generates static bundles. Its core concepts include entry (starting point), output (bundled files), loaders (transformations like Babel or Sass), plugins (optimizations and injections), and code splitting (lazy-loaded chunks).

Think of Webpack like a factory assembly line. Raw materials (source files) come in on one end. Conveyor belts (loaders) transform each material — for example, converting SCSS to CSS or TypeScript to JavaScript. Robots (plugins) perform specialized tasks like minification. The finished product (bundles) comes out the other end.

Webpack configuration lives in webpack.config.js. While powerful, its configuration can be verbose, leading to the rise of simpler tools like Vite and Parcel.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

Webpack’s ecosystem is vast, with thousands of loaders and plugins. It supports tree shaking, lazy loading, and multiple bundle targets (web, node, webworker).

Vite, esbuild, Tree Shaking, Code Splitting, Bundling

Vite vs Webpack