Webpack Tutorial for BeginnersEpisode 1

Course Files & Introduction

Understand what Webpack is, why modern JavaScript projects need a module bundler, and set up the project files you will use throughout this series.

Course Files & Introduction

Welcome to the Webpack Tutorial for Beginners! In this series you will learn how to use Webpack — the most popular module bundler for JavaScript applications. By the end, you will know how to bundle JavaScript files, transpile modern syntax with Babel, and process CSS and SASS — all through Webpack's powerful loader system.

What Is Webpack?

Webpack is a static module bundler for JavaScript applications. It takes your source files — JavaScript, CSS, images, and more — analyzes their dependencies, and bundles them into optimized output files that the browser can load efficiently.

Your Source Files          Webpack          Output Bundle
─────────────────        ──────────        ─────────────
src/index.js        →                  →   dist/bundle.js
src/utils.js        →     Webpack      →   dist/styles.css
src/helpers.js      →    (bundler)     →   dist/images/...
src/styles.css      →                  →
src/styles.scss     →                  →

Why Do We Need a Bundler?

Problem	How Webpack Solves It
Many JS files = many HTTP requests	Bundles everything into one (or few) files
Modern JS syntax not supported in old browsers	Transpiles with Babel loader
CSS preprocessors (SASS) need compilation	Processes with CSS/SASS loaders
No native module system in older browsers	Resolves `import`/`export` statements
Unoptimized assets slow down pages	Minifies and optimizes output
Manual build steps are error-prone	Automated pipeline with one command

Webpack vs Other Tools

Feature	Webpack	Grunt/Gulp	Vite
Type	Module bundler	Task runner	Dev server + bundler
Module system	Built-in (resolves imports)	Not built-in	Built-in (ESM native)
Code splitting	✅ Built-in	❌ Manual	✅ Built-in
Hot Module Replacement	✅ Yes	❌ No	✅ Yes (faster)
Configuration	webpack.config.js	Gruntfile / gulpfile	vite.config.js
Ecosystem	Massive, mature	Large, older	Growing, modern

Core Concepts

Webpack has four core concepts that you will learn throughout this series:

Concept	What It Means
Entry	The starting point file — Webpack begins here and follows all imports
Output	Where the bundled files are written (typically `dist/` folder)
Loaders	Transform non-JavaScript files (CSS, SASS, images) so Webpack can process them
Plugins	Perform wider tasks like bundle optimization, asset management, and injection

Setting Up the Project

mkdir webpack-starter
cd webpack-starter
npm init -y

Project Structure

webpack-starter/
├── src/
│   ├── index.js          (entry point)
│   ├── utils.js          (utility module)
│   ├── dom.js            (DOM helper module)
│   ├── css/
│   │   └── styles.css    (CSS styles)
│   └── scss/
│       └── main.scss     (SASS styles)
├── dist/
│   └── index.html        (the HTML page)
├── webpack.config.js     (created in episode 3)
├── package.json
└── node_modules/

Create the Source Files

src/utils.js

export function greet(name) {
    return `Hello, ${name}!`;
}

export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

export const VERSION = '1.0.0';

src/dom.js

export function render(selector, content) {
    const el = document.querySelector(selector);
    if (el) {
        el.innerHTML = content;
    }
}

export function addClass(selector, className) {
    const el = document.querySelector(selector);
    if (el) {
        el.classList.add(className);
    }
}

src/index.js

import { greet, VERSION } from './utils';
import { render } from './dom';

const message = greet('Webpack');
render('#app', `${message}
Version: ${VERSION}`);

console.log('App loaded successfully!');

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack Starter</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

The HTML file references bundle.js — this is the output file that Webpack will create from all our source modules.

The import/export Problem

If you tried to load src/index.js directly in the browser, it would fail. The import and export statements need to be resolved. Webpack reads these statements, follows the dependency tree, and bundles everything into a single file the browser can understand.

index.js imports from utils.js and dom.js
    └── utils.js (exports greet, capitalize, VERSION)
    └── dom.js (exports render, addClass)

Webpack combines all of these into one bundle.js

Key Takeaways

Webpack is a module bundler that combines JavaScript files and their dependencies into optimized bundles
It solves problems like multiple HTTP requests, modern syntax support, and CSS preprocessing
Four core concepts: Entry (starting point), Output (result), Loaders (transformers), Plugins (utilities)
The entry point is where Webpack starts — it follows all import statements to discover the full dependency tree
The output is typically a single bundle.js file in a dist/ folder