Stop 17 · Build ToolsTopics · 2/9

Webpack

In short

Webpack is old, but it still runs many big company codebases. When you join a team, there's a fair chance a webpack.config.js is waiting for you, so learn to read one.

The long-standing, highly configurable JavaScript module bundler that powers many existing production apps — more complex to configure than newer tools, but extremely flexible.

The jaadu dabbawala packs steel tiffins into neat crates at a sorting station.

Think of it like this

The dabbawala sorting station

Thousands of tiffins come in from homes. At the station each one is checked, labelled and packed into the right crate for its office. Webpack does this with your files: it starts at one entry, follows every import, processes each file and packs neat bundles.

Watch it happen

One Webpack build

Entry

Graph

Loaders

Plugins

Bundles

1/5Webpack opens ./src/index.js, the entry in your config.

The big ideas

What you need to know

Entry and output

Entry is the file where Webpack starts reading. Output is where the finished bundles go.

Loaders transform files

Webpack understands only JS and JSON by itself. Loaders teach it CSS, TypeScript, images and more.

Plugins do the bigger jobs

Plugins work on the whole build, for example generating index.html or extracting CSS into separate files.

Code splitting

A dynamic import() creates a separate chunk that loads only when needed, keeping the first download small.

See it in code

Walk through the code

1// webpack.config.js2const HtmlWebpackPlugin = require("html-webpack-plugin");3 4module.exports = {5  mode: "production",6  entry: "./src/index.js",7  output: { filename: "[name].[contenthash].js", clean: true },8  module: {9    rules: [10      { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader" },11      { test: /\.css$/, use: ["style-loader", "css-loader"] },12    ],13  },14  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],15};

1/4Load the plugin that generates index.html for you.

Loaders in the use array run from right to left, so css-loader reads the CSS first and style-loader then injects it. [contenthash] changes the filename only when the content changes.

Save yourself the pain

Common mistakes

Oops

Writing the loaders array in reading order, like ["css-loader", "style-loader"].

Do this instead

Remember loaders run right to left. Put the one that should run last on the left.

Oops

Copying a huge config from a blog without knowing what each line does.

Do this instead

Start small: entry, output, one loader. Add rules one at a time and rebuild after each.

Your mission

Build Webpack by hand

~30 min

Quick check

You import a .css file and Webpack throws "You may need an appropriate loader". What's missing?

Go deeper

1Set up a minimal Webpack config from scratch (entry, output, one loader).
2Learn the difference between loaders (transform files) and plugins (broader build hooks).
3Compare the resulting complexity to an equivalent Vite setup.