Lecture ini adalah jembatan dari ES6 Modules menuju Webpack.

Kalau lecture sebelumnya menjelaskan:

“Dengan ES6 Modules, kita bisa memecah code ke banyak file dan browser bisa otomatis mengikuti import.”

Lecture kali ini menjelaskan masalah baru:

“Bagaimana kalau file JavaScript kita ada ratusan atau ribuan? Browser harus melakukan banyak request. Bisakah kita gabungkan file-file tersebut menjadi satu file?”

Jawabannya:

Webpack.

1. Masalah yang ingin diselesaikan

Sebelumnya kita punya struktur seperti:

src/
├── app.ts
├── models/
│   └── user.ts
└── user-utils/
    └── user-action.ts

Setelah TypeScript di-compile:

dist/
├── app.js
├── models/
│   └── user.js
└── user-utils/
    └── user-action.js

Karena kita menggunakan ES6 Modules, app.js mungkin memiliki:

import { createUser } from "./user-utils/user-action.js";

Kemudian user-action.js memiliki:

import User from "../models/user.js";

Maka browser perlu mengambil beberapa file.

2. Browser melakukan banyak request

Alurnya kira-kira:

index.html
    │
    ├── style.css
    │
    └── app.js
           │
           └── user-action.js
                    │
                    └── user.js

Jadi browser melakukan:

Request 1 → index.html
Request 2 → style.css
Request 3 → app.js
Request 4 → user-action.js
Request 5 → user.js

Untuk project kecil, ini mungkin bukan masalah besar.

Tetapi bayangkan project besar.

3. Bagaimana kalau project punya 500 file?

Misalnya project besar menghasilkan:

dist/
├── app.js
├── user.js
├── product.js
├── order.js
├── payment.js
├── cart.js
├── validation.js
├── helper.js
├── ...
└── file500.js

Browser harus mengambil banyak dependency.

Secara sederhana:

Browser
   │
   ├── request → app.js
   ├── request → user.js
   ├── request → product.js
   ├── request → order.js
   ├── request → payment.js
   ├── request → cart.js
   ├── request → helper.js
   ├── ...
   └── request → file500.js

Maka semakin banyak file yang harus diambil, semakin kompleks proses loading aplikasi.

4. Tapi bukankah file-file tersebut kecil?

Ya.

Dosen bahkan mengatakan:

File-file JavaScript tersebut mungkin ukurannya kecil.

Misalnya:

user.js       → 2 KB
product.js    → 3 KB
order.js      → 4 KB
helper.js     → 1 KB

Masalahnya bukan hanya ukuran file.

Ada juga biaya dari jumlah request.

Misalnya secara sederhana:

1 file besar
      ↓
1 request

100 file kecil
      ↓
100 requests

Jadi ada trade-off antara:

jumlah file

dan:

jumlah request

5. Analogi sederhana

Bayangkan kamu membeli barang dari toko online.

Pilihan A — satu paket

Semua barang dimasukkan ke:

📦 1 paket

Kemudian dikirim sekali.

Pilihan B — 100 paket

Barang yang sama dikirim:

📦 📦 📦 📦 📦 📦 ...

Walaupun masing-masing paket kecil, ada proses pengiriman yang harus dilakukan untuk setiap paket.

Dalam konteks web:

Paket     = JavaScript file
Pengiriman = HTTP request

Webpack membantu menggabungkan banyak file menjadi paket JavaScript yang lebih sedikit, bahkan bisa menjadi satu bundle.

6. Solusi: Bundling

Dosen kemudian memperkenalkan istilah:

Bundling

Bundling berarti:

Menggabungkan beberapa file JavaScript menjadi satu file JavaScript.

Misalnya sebelum bundling:

app.js
user.js
product.js
order.js
helper.js

Kemudian Webpack menghasilkan:

bundle.js

Secara konsep:

app.js ───────┐
user.js ──────┤
product.js ───┤
order.js ─────┤──→ Webpack → bundle.js
helper.js ────┘

Kemudian HTML cukup menggunakan:

<script src="bundle.js"></script>

7. Jadi ES6 Modules dan Webpack bukan saingan

Ini sangat penting.

Jangan berpikir:

ES6 Modules ATAU Webpack

Dalam workflow lecture ini justru:

TypeScript
    ↓
ES6 Modules
    ↓
compile
    ↓
multiple JavaScript files
    ↓
Webpack
    ↓
single bundled JavaScript file

Jadi keduanya punya pekerjaan berbeda.

8. Peran ES6 Modules

ES6 Modules membantu kita mengorganisasi source code.

Misalnya:

user.ts
product.ts
order.ts
payment.ts

Masing-masing file bisa memiliki:

export

dan:

import

Sehingga code kita lebih mudah dipisahkan.

9. Peran Webpack

Webpack kemudian melihat hubungan antar-file tersebut dan menggabungkannya.

Misalnya:

app.ts
 │
 ├── import user
 │
 ├── import product
 │
 └── import order

Setelah TypeScript compile:

app.js
user.js
product.js
order.js

Kemudian Webpack:

app.js
user.js
product.js
order.js
      │
      ▼
   Webpack
      │
      ▼
  bundle.js

10. Istilah penting: Bundle

Hasil gabungan tersebut disebut:

bundle

Misalnya:

bundle.js

Berisi code dari berbagai JavaScript files.

Jadi:

Multiple JavaScript files
          ↓
       Webpack
          ↓
    JavaScript bundle

11. Webpack juga melakukan minification

Dosen mengatakan Webpack tidak hanya melakukan bundling.

Webpack juga bisa melakukan:

Minification

Minification adalah proses membuat file JavaScript menjadi lebih kecil tanpa mengubah perilaku program.

Contohnya, kita punya:

function calculateTotalPrice(price, quantity) {
    const totalPrice = price * quantity;
    return totalPrice;
}

Untuk manusia, ini mudah dibaca.

Setelah minification, secara konsep bisa menjadi sesuatu seperti:

function a(b,c){return b*c}

Tujuannya bukan agar manusia nyaman membaca code tersebut.

Tujuannya:

Ukuran file lebih kecil → lebih cepat dikirim ke browser.

12. Apa yang dilakukan minification?

Dosen menyebut beberapa hal.

Menghapus whitespace

Dari:

const user = {
    name: "John",
    age: 28
};

menjadi sesuatu yang lebih compact.

Menghapus line breaks

Code:

baris 1
baris 2
baris 3
baris 4

bisa dibuat menjadi lebih sedikit karakter.

Memendekkan nama variable

Misalnya:

const userName = "John";
const userAge = 28;

bisa diubah secara internal menjadi nama yang lebih pendek, misalnya:

const a = "John";
const b = 28;

Selama behavior program tetap sama.

13. Bundling vs Minification

Jangan sampai kedua istilah ini tertukar.

Bundling

Mengurangi jumlah file.

5 files
   ↓
Webpack
   ↓
1 bundle

Minification

Mengurangi ukuran isi file.

100 KB
   ↓
Webpack minification
   ↓
70 KB

Jadi:

Bundling
→ jumlah file lebih sedikit

Minification
→ ukuran file lebih kecil

Webpack bisa melakukan keduanya.

14. Kenapa kombinasi keduanya bagus?

Misalnya sebelum Webpack:

app.js        20 KB
user.js       10 KB
product.js    15 KB
order.js      20 KB
helper.js      5 KB

Total:

70 KB

Webpack bisa:

5 files
   ↓
Bundling
   ↓
1 file
   ↓
Minification
   ↓
bundle lebih kecil

Hasil akhirnya bisa jauh lebih efisien untuk dikirim ke browser.

15. Webpack sebenarnya lebih powerful dari sekadar JavaScript

Dosen juga menyebut bahwa Webpack dapat memproses asset lain.

Misalnya:

JavaScript
CSS
Images
Fonts

Secara konsep:

             Webpack
                │
       ┌────────┼────────┐
       ▼        ▼        ▼
 JavaScript    CSS     Images
       │        │        │
       └────────┼────────┘
                ▼
         Build output

Jadi Webpack bukan sekadar:

“alat untuk menggabungkan .js.”

Ia adalah module bundler/build tool yang dapat menangani berbagai jenis dependency dan asset melalui konfigurasi/loaders/plugins.

16. Webpack juga membantu development

Dosen menyebut satu kemampuan lain:

live development server

Secara sederhana, development server membantu kita saat coding.

Misalnya:

ubah code
   ↓
Webpack mendeteksi perubahan
   ↓
build/reload
   ↓
browser menampilkan perubahan

Jadi developer tidak harus terus-menerus melakukan proses manual untuk melihat hasil perubahan.

Catatan: detail fitur development server akan bergantung pada konfigurasi Webpack yang nanti dipelajari di lecture berikutnya.

17. Kenapa Webpack bisa tahu file mana yang harus dibundle?

Ini berhubungan langsung dengan ES6 Modules yang baru kita pelajari.

Misalnya:

// app.ts
import { createUser } from "./user-action.js";

Webpack melihat:

app.ts
  │
  └── dependency → user-action

Kemudian:

// user-action.ts
import User from "./user.js";

Webpack melihat:

user-action.ts
  │
  └── dependency → user.ts

Sehingga Webpack bisa membangun dependency graph:

          app
           │
           ▼
      user-action
           │
           ▼
          user

Kemudian semua dependency tersebut dapat dimasukkan ke bundle.

18. Ini sebenarnya lanjutan langsung dari lecture sebelumnya

Lecture sebelumnya:

ES6 Modules

mengajarkan browser:

“Kalau app.js membutuhkan user-action.js, ambil file itu.”

Masalahnya:

app.js
   ↓
user-action.js
   ↓
user.js

bisa menyebabkan beberapa request.

Lecture sekarang berkata:

“Kalau kita menggunakan Webpack, dependency tersebut bisa diproses terlebih dahulu dan digabungkan menjadi bundle.”

Jadi:

ES6 Modules
     ↓
memecah code
     ↓
Webpack
     ↓
menggabungkan code
     ↓
bundle.js

19. Konsep yang sangat penting: Development vs Production

Ini membantu memahami kenapa kita repot-repot memecah file kalau akhirnya digabung lagi?

Pertanyaan bagus.

Saat development, kita ingin code:

user.ts
product.ts
order.ts
payment.ts

Karena jauh lebih mudah dikelola.

Misalnya kamu sedang memperbaiki User.

Kamu cukup pergi ke:

models/user.ts

Daripada mencari code User di file JavaScript yang berisi puluhan ribu baris.

Jadi:

Development

Banyak file
   ↓
lebih mudah diorganisasi

Build/Production

Webpack
   ↓
bundle
   ↓
lebih optimal untuk browser

Jadi kita mendapatkan dua keuntungan sekaligus:

Developer
   ↓
code terstruktur

Browser
   ↓
asset lebih optimal

20. Analogi paling mudah

Bayangkan kamu menulis buku.

Saat menulis

Kamu memisahkan:

Bab 1
Bab 2
Bab 3
Bab 4

Ini memudahkan kamu mengedit.

Tetapi ketika ingin mencetak dan mengirim ke pembaca:

Bab 1
Bab 2
Bab 3
Bab 4
     ↓
digabung
     ↓
📕 Satu buku

Dalam konteks TypeScript:

user.ts
product.ts
order.ts
payment.ts
     ↓
Webpack
     ↓
bundle.js

Source code tetap terorganisasi dalam banyak file.

Output production bisa berupa bundle yang lebih mudah dikirim ke browser.

21. Apakah Webpack menggabungkan file secara sembarangan?

Tidak.

Webpack tidak sekadar melakukan:

file A
+
file B
+
file C

seperti copy-paste biasa.

Webpack memahami dependency relationship dari module.

Misalnya:

app
├── user-action
│   └── user
├── product-action
│   └── product
└── order-action
    └── order

Webpack membangun dependency graph tersebut kemudian menentukan apa yang harus masuk ke bundle.

22. Istilah “entry point”

Walaupun lecture ini belum terlalu mendalam soal konfigurasi, konsep ini penting untuk persiapan lecture berikutnya.

Biasanya Webpack membutuhkan sebuah entry point.

Misalnya:

app.ts

adalah titik awal.

Webpack mulai dari:

app.ts

kemudian mengikuti:

import ...

dan dependency di dalam dependency tersebut.

Misalnya:

app.ts
  │
  ├── user-action.ts
  │      └── user.ts
  │
  └── product-action.ts
         └── product.ts

Webpack mengikuti semuanya.

23. Jadi Webpack seperti detektif dependency

Bayangkan Webpack adalah detektif.

Dia mulai dari:

app.js

Kemudian menemukan:

Saya membutuhkan user-action.js.

Webpack mengikuti.

Di dalam user-action.js:

Saya membutuhkan user.js.

Webpack mengikuti lagi.

Kemudian:

user.js

mungkin membutuhkan file lain.

Webpack terus mengikuti dependency tersebut sampai mendapatkan seluruh graph yang diperlukan.

Setelah itu:

Dependency graph
       ↓
Webpack
       ↓
Bundle

24. Apa masalah yang diselesaikan Webpack?

Mari buat tabel.

25. Tetapi hati-hati: “satu file = selalu lebih cepat” bukan aturan mutlak

Lecture ini memberikan penyederhanaan yang bagus untuk pemula:

banyak request
     ↓
kurangi request
     ↓
lebih baik

Tetapi dalam aplikasi modern, tidak selalu berarti semua file harus digabung menjadi satu file raksasa.

Webpack juga bisa melakukan teknik seperti code splitting, sehingga browser hanya mengambil code yang benar-benar dibutuhkan pada saat tertentu.

Contohnya:

bundle utama
+
bundle halaman dashboard
+
bundle halaman admin

Jadi prinsip modernnya bukan:

“Selalu buat satu file sebesar mungkin.”

Melainkan:

Atur bagaimana code dibundle agar loading dan penggunaan aplikasi efisien.

Untuk level lecture ini, cukup pahami dulu konsep dasar bundling.

26. Hubungan TypeScript → ES6 Modules → Webpack

Ini bagian yang menurut saya paling penting dari seluruh lecture.

Kita mulai dari source code:

             TypeScript
                 │
                 ▼
       ┌────────────────────┐
       │ Banyak file .ts    │
       │                    │
       │ app.ts             │
       │ user.ts            │
       │ product.ts         │
       │ order.ts           │
       └─────────┬──────────┘
                 │
                 │ tsc
                 ▼
       ┌────────────────────┐
       │ Banyak file .js    │
       │                    │
       │ app.js             │
       │ user.js            │
       │ product.js         │
       │ order.js           │
       └─────────┬──────────┘
                 │
                 │ Webpack
                 ▼
       ┌────────────────────┐
       │     bundle.js      │
       │                    │
       │ semua dependency   │
       │ yang dibutuhkan    │
       └─────────┬──────────┘
                 │
                 ▼
              Browser

27. Kenapa tidak langsung menulis satu file saja?

Ini pertanyaan penting.

Kalau tujuan akhirnya:

bundle.js

kenapa tidak dari awal kita buat:

app.ts

satu file saja?

Karena maintainability.

Bayangkan aplikasi besar dengan:

100.000 baris code

Kalau semuanya berada dalam satu file:

app.ts

akan sangat sulit:

• mencari code
• debugging
• bekerja dalam team
• melakukan perubahan
• memahami dependency
• melakukan testing
• memisahkan tanggung jawab

Dengan banyak module:

models/
services/
controllers/
utils/
components/

code jauh lebih terstruktur.

Jadi:

Banyak source files
        ↓
developer-friendly
        ↓
Webpack
        ↓
optimized build
        ↓
browser-friendly

28. Separation of Concerns

Ini juga berhubungan dengan prinsip Separation of Concerns.

Misalnya:

models/
    user.ts
    product.ts

services/
    user-service.ts
    payment-service.ts

utils/
    validation.ts
    formatting.ts

Masing-masing bagian punya tanggung jawab berbeda.

Developer mendapatkan:

code terstruktur

Kemudian Webpack bisa memproses semuanya menjadi output yang lebih sesuai untuk browser.

29. Webpack bukan compiler TypeScript

Ini juga sering membingungkan.

Dalam konteks lecture ini, alurnya dijelaskan sebagai:

TypeScript
   ↓
TypeScript compiler
   ↓
JavaScript
   ↓
Webpack
   ↓
Bundle

Jadi secara konsep:

TypeScript compiler

Mengubah:

.ts

menjadi:

.js

Webpack

Mengambil module/dependency JavaScript dan membuat build/bundle.

.js + dependencies
       ↓
    Webpack
       ↓
   bundle

Walaupun dalam project modern Webpack dapat dikonfigurasi untuk memproses TypeScript secara langsung menggunakan tool/plugin tertentu, untuk memahami lecture ini ikuti dulu alur yang dosen gunakan.

30. Minification tidak sama dengan compression

Ini sedikit tambahan penting.

Minification:

source code
   ↓
hapus whitespace
pendekkan nama
hapus karakter tidak perlu
   ↓
file lebih kecil

Sedangkan compression seperti gzip/Brotli adalah proses berbeda yang dilakukan saat transfer/serving.

Jadi:

Bundling
→ menggabungkan module

Minification
→ mengecilkan code

Compression
→ mengecilkan data untuk transfer

Webpack terutama membahas bundling dan minification di lecture ini.

31. Kenapa performance bisa meningkat?

Secara sederhana:

Sebelum Webpack

HTML
 │
 ├── app.js
 ├── user.js
 ├── product.js
 ├── order.js
 ├── helper.js
 └── ...

Banyak resource perlu diambil.

Dengan bundle

HTML
 │
 └── bundle.js

Lebih sedikit JavaScript file yang harus diminta.

Ditambah:

minification

membuat ukuran JavaScript yang dikirim bisa lebih kecil.

Jadi ada dua optimasi:

Bundling
   ↓
mengurangi jumlah file/request

Minification
   ↓
mengurangi ukuran code

32. Ringkasan istilah lecture

33. Kesimpulan paling sederhana

Lecture ini sebenarnya menjawab satu pertanyaan:

“Kalau ES6 Modules membuat kita punya banyak file JavaScript, bagaimana supaya browser tidak perlu mengambil terlalu banyak file?”

Jawabannya:

ES6 Modules
    ↓
code dipisah menjadi banyak file
    ↓
TypeScript compile
    ↓
banyak file JavaScript
    ↓
Webpack
    ↓
bundling
    ↓
satu/lebih bundle
    ↓
minification
    ↓
file lebih optimal
    ↓
Browser

Jadi jangan melihat ES6 Modules dan Webpack sebagai dua teknologi yang bertentangan.

Justru mereka bekerja pada tahap yang berbeda:

ES6 Modules membantu developer mengorganisasi code menjadi banyak file.

Webpack membantu memproses dependency tersebut menjadi output yang lebih optimal untuk aplikasi.

Dan kalimat paling penting untuk dibawa ke lecture berikutnya adalah:

“Saya ingin source code saya tetap terpecah menjadi banyak module agar mudah dikelola, tetapi saya ingin Webpack menggabungkan dan mengoptimalkannya ketika aplikasi dibuild.”