At its core, Webpack is a static module bundler for modern JavaScript applications. When Webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Let's break down its four core concepts.

1. Entry

The entry point tells Webpack where to start building its dependency graph. By default, it's ./src/index.js, but you can specify any file.

2. Output

The output property tells Webpack where to emit the bundles it creates and what to name them. The default is ./dist/main.js for the main bundle.

3. Loaders

Out of the box, Webpack only understands JavaScript and JSON files. Loaders allow Webpack to process other types of files and convert them into valid modules that can be added to the dependency graph.

  • babel-loader: Transpiles modern JavaScript (ES6+) into browser-compatible JavaScript (ES5).
  • css-loader: Reads a CSS file and resolves @import and url() paths.
  • style-loader: Injects the CSS into the DOM by adding a <style> tag.

Loaders are specified in a module.rules array and are applied from right to left (or bottom to top).

4. Plugins

While loaders work on a per-file basis, plugins are more powerful and can perform a wider range of tasks like bundle optimization, asset management, and environment variable injection.

  • HtmlWebpackPlugin: Generates an index.html file for you and automatically injects your bundled JavaScript file.
  • MiniCssExtractPlugin: Extracts CSS into separate files instead of injecting it into the <head>, which is better for production.

Basic Webpack Configuration (webpack.config.js)

Here's a simple configuration file that ties these concepts together. This file tells Webpack how to bundle a project.

JavaScript


// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 1. Entry
  entry: './src/index.js',

  // 2. Output
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Cleans the /dist folder before each build
  },

  // 3. Loaders
  module: {
    rules: [
      {
        test: /\.css$/i, // For any file that ends with .css
        use: ['style-loader', 'css-loader'], // Loaders are applied right-to-left
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // For image files
        type: 'asset/resource',
      },
      {
        test: /\.m?js$/, // For JavaScript files
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },

  // 4. Plugins
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack App',
      template: './src/index.html'
    }),
  ],

  // Dev Server Configuration
  devServer: {
    static: './dist',
  },
};

This setup tells Webpack to start at src/index.js, process any CSS, image, and JS files it finds, and output a final bundle.js and index.html into a dist folder.