Webpack · Part 1 — The Mental Model & Your First Build

Webpack mang tiếng đáng sợ, nhưng ý tưởng cốt lõi rất đơn giản. Một khi bạn hình dung được đồ thị phụ thuộc, mọi tùy chọn config sau đó đều hợp lý. Phần này xây mô hình tư duy đó và cho ra một bundle thật.

Bấm play bên dưới để xem Webpack đi từ một file entry qua mọi import vào một bundle:

---

1. Vì sao có bundler

Trình duyệt từng buộc bạn ship hàng chục thẻ <script> đúng thứ tự, mọi thứ chia chung một global scope. ES module giúp ích, nhưng ship hàng trăm file nhỏ nghĩa là hàng trăm request, và bạn vẫn không thể import CSS, ảnh, hay biến đổi TypeScript/JSX trong trình duyệt.

Một bundler giải quyết điều này: nó đọc các module nguồn, giải quyết mọi phụ thuộc, biến đổi thứ cần biến đổi, và phát ra một số ít file tối ưu trình duyệt tải hiệu quả.

---

2. Đồ thị phụ thuộc

Đây là ý tưởng duy nhất cần thấm. Webpack bắt đầu ở một file entry và đi theo mọi import (và require) đệ quy, dựng một đồ thị của mọi module ứng dụng chạm tới:

index.js (entry)
├─ app.js
│  ├─ math.js
│  │  └─ utils.js
│  └─ data.json
└─ styles.css

Bất cứ thứ gì không tới được từ entry sẽ không được gồm vào. Đó là nền tảng của tree shaking (Phần 7). Để ý CSS và JSON cũng là node — với Webpack, mọi thứ đều là module.

---

3. Bốn khái niệm cốt lõi

Mọi thứ trong Webpack đều thuộc một trong số này:

Concept	Câu hỏi nó trả lời
Entry	Đồ thị bắt đầu ở đâu?
Output	Bundle đi đâu, tên là gì?
Loaders	Biến đổi file không phải JS thế nào?
Plugins	Móc vào build để làm việc khác thế nào?

Giữ bốn cái này trong đầu và bạn đọc được mọi webpack.config.js.

---

4. Build đầu tiên

Dựng một project nhỏ:

mkdir webpack-intro && cd webpack-intro
npm init -y
npm install --save-dev webpack webpack-cli

Tạo source:

// src/index.js
import { greet } from "./greet.js";
document.body.innerHTML = greet("Webpack");

// src/greet.js
export function greet(name) {
  return `Hello, ${name}!`;
}

Giờ chạy Webpack không cần config:

npx webpack

Webpack 5 có mặc định hợp lý: entry ./src/index.js, output ./dist/main.js, mode production. Mở dist/main.js và bạn thấy hai module được gộp và minify thành một file.

---

5. Thêm npm scripts

Đừng gõ npx webpack mãi — gắn scripts:

{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch"
  }
}

--watch build lại mỗi lần lưu. Phần 5 sẽ nâng cấp lên dev server tự tải lại.

---

6. Build thực sự làm gì

Chạy trình trực quan trên và xem trình tự: Webpack giải quyết entry, đọc các import, đệ quy giải quyết từng phụ thuộc vào đồ thị, chạy loader trên module không phải JS, rồi đóng gói mọi thứ vào bundle output, áp dụng tối ưu. Mọi phần sau của series chỉ là cấu hình một trong các bước đó.

---

7. Bài tập

1. Bạn thêm file helper.js nhưng không bao giờ import nó ở đâu. Nó có trong bundle không? Vì sao?

Lời giải

Không — nó không tới được từ entry, nên không thuộc đồ thị phụ thuộc.

2. Không có file config nào, npx webpack tìm entry ở đâu và ghi output ở đâu?

Lời giải

Entry mặc định ./src/index.js, output ./dist/main.js.

3. Vì sao trình duyệt không thể tải thẳng file src/ bằng <script type="module"> và bỏ qua Webpack?

Lời giải

Được với JS thuần, nhưng không với import phi chuẩn (CSS, TS, JSX, ảnh), và ship nhiều file nhỏ thì tốn request và không tối ưu.

Nâng cao:trong trình trực quan, bấm từng module để đọc import của nó, rồi bấm build và xác nhận thứ tự giải quyết khớp một lượt duyệt theo chiều rộng từ entry.

---

Điểm chính

• Bundler đọc module, giải quyết phụ thuộc, biến đổi, và phát ra file tối ưu.
• Webpack dựng đồ thị phụ thuộc từ một entry duy nhất.
• Với Webpack, mọi thứ là module — JS, CSS, JSON, ảnh.
• Bốn khái niệm cốt lõi là entry, output, loader, plugin.
• Webpack 5 build không cần config nhờ mặc định hợp lý.

---

Tiếp theo

Phần 2 — Giải phẫu config: webpack.config.js từ đầu — mode, entry, output, context, và resolve — biến phép màu zero-config thành cấu hình tường minh, dễ đọc bạn kiểm soát.