Lecture ini sebenarnya sedang menjelaskan cara menyiapkan Webpack di project TypeScript, bukan konfigurasi Webpack-nya secara penuh. Jadi fokus utamanya adalah:

Membuat project punya package.json, meng-install Webpack beserta tools pendukungnya, lalu memahami fungsi masing-masing package.

Mari kita bedah dari awal sampai akhir dengan bahasa sederhana.

1. Gambaran besar lecture ini

Sebelumnya kita sudah belajar bahwa Webpack berguna untuk:

• mengumpulkan banyak file JavaScript/module,
• mengikuti dependency antar-file,
• melakukan bundling,
• melakukan minification,
• dan membantu proses development.

Misalnya project kita punya:

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

Setelah TypeScript dikompilasi:

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

Tanpa Webpack, browser perlu menangani beberapa file.

Dengan Webpack, nantinya kira-kira:

app.ts
  ↓
TypeScript
  ↓
JavaScript modules
  ↓
Webpack
  ↓
bundle.js
  ↓
Browser

Nah, lecture ini mengajarkan persiapan sebelum Webpack bisa digunakan.

2. Mengapa perlu package.json?

Dosen mengatakan:

“before we do that first we are going to create the package.json file”

Kenapa?

Karena sekarang kita mulai menggunakan third-party packages.

Contohnya:

webpack
webpack-cli
webpack-dev-server
typescript
ts-loader

Package-package tersebut akan menjadi bagian dari environment project kita.

Untuk mengelola package tersebut, Node.js menggunakan file:

package.json

Anggap saja package.json seperti:

📋 KTP / daftar identitas dan kebutuhan project

Di sana kita bisa mencatat:

• nama project,
• versi project,
• entry point,
• scripts,
• dependencies,
• devDependencies,
• dan informasi lainnya.

3. Membuat package.json dengan npm init

Command yang digunakan:

npm init

Kemudian npm akan memberikan beberapa pertanyaan.

Misalnya:

package name:
version:
description:
entry point:
test command:
git repository:
keywords:
author:
license:

Kita bisa mengisi atau membiarkannya kosong tergantung kebutuhan.

Setelah selesai, npm membuat:

package.json

Contohnya kira-kira:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {},
  "author": "John",
  "license": "ISC"
}

Jadi sebelum:

project/
├── src/
└── ...

Setelah npm init:

project/
├── src/
├── package.json
└── ...

4. Apa sebenarnya npm?

Kalau kamu masih agak bingung dengan npm, sederhananya:

npm = Node Package Manager

npm digunakan untuk mengelola package JavaScript/Node.js.

Misalnya kita ingin menggunakan Webpack.

Daripada kita mencari Webpack sendiri dan download manual, kita bisa melakukan:

npm install webpack

npm akan:

1. mencari package Webpack,
2. mendownloadnya,
3. menyimpannya di project,
4. mencatat versinya di package.json,
5. dan meng-install dependency yang dibutuhkan Webpack.

5. Command install yang digunakan lecture

Lecture menggunakan konsep:

npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

Ada beberapa package di sini. Kita akan bahas satu per satu.

Secara sederhana:

npm install
    │
    ├── webpack
    ├── webpack-cli
    ├── webpack-dev-server
    ├── typescript
    └── ts-loader

Dan karena menggunakan:

--save-dev

package-package tersebut masuk ke:

"devDependencies": {
    ...
}

6. Apa arti --save-dev?

Ini bagian yang penting.

Ada dua konsep yang perlu kamu bedakan:

dependencies
devDependencies

dependencies

Biasanya berisi package yang dibutuhkan oleh aplikasi saat runtime/production.

Contohnya sebuah aplikasi mungkin membutuhkan library tertentu agar aplikasinya berjalan.

devDependencies

Berisi package yang dibutuhkan terutama untuk proses development/build/testing.

Contohnya:

webpack
webpack-cli
webpack-dev-server
typescript
ts-loader

Tools tersebut membantu kita:

coding
  ↓
compile
  ↓
bundle
  ↓
development
  ↓
build

Jadi lecture memasukkannya sebagai:

"devDependencies": {
    "typescript": "...",
    "webpack": "...",
    "webpack-cli": "...",
    "webpack-dev-server": "...",
    "ts-loader": "..."
}

7. Apa itu node_modules?

Setelah menjalankan npm install, akan muncul folder:

node_modules/

Misalnya:

project/
├── node_modules/
├── package.json
└── src/

Folder node_modules berisi package yang kita install beserta dependency mereka.

Misalnya kita install:

webpack

Webpack sendiri mungkin membutuhkan package lain.

Gambaran sederhananya:

Webpack
 ├── Package A
 ├── Package B
 ├── Package C
 │    └── Package D
 └── Package E

npm akan menangani dependency tersebut.

Jadi node_modules bisa menjadi sangat besar.

8. Apakah kita perlu memahami isi node_modules?

Tidak.

Ini poin penting dari lecture.

Dosen mengatakan kita:

“don’t need to worry about this node modules folder”

Benar.

Sebagai developer, kita biasanya tidak perlu membuka dan memahami ribuan file di:

node_modules/

Yang penting kita tahu:

package.json
      ↓
daftar package yang dibutuhkan project

node_modules
      ↓
package-package yang benar-benar sudah di-install

9. package.json vs node_modules

Ini sering membingungkan pemula.

Bayangkan:

package.json

adalah:

📋 daftar belanja

Misalnya:

{
  "devDependencies": {
    "webpack": "5.x",
    "typescript": "5.x"
  }
}

Artinya:

“Project ini membutuhkan Webpack dan TypeScript.”

Sedangkan:

node_modules

adalah:

🛒 barang yang sudah dibeli

Jadi:

package.json
      ↓
"apa saja yang project butuhkan?"

node_modules
      ↓
"package-nya sudah ada di komputer"

10. Sekarang kita bahas package satu per satu

Lecture meng-install 5 package utama:

1. webpack
2. webpack-cli
3. webpack-dev-server
4. typescript
5. ts-loader

Masing-masing punya tugas berbeda.

11. webpack

Ini adalah inti dari pembahasan.

Webpack digunakan untuk bundling.

Misalnya kita punya:

app.js
user-action.js
user.js

Dengan dependency:

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

Webpack akan membaca dependency tersebut dan mengolahnya menjadi output yang bisa digunakan browser.

Secara sederhana:

          ┌──────────┐
          │  app.js  │
          └────┬─────┘
               │
               ↓
       ┌───────────────┐
       │ user-action.js│
       └───────┬───────┘
               │
               ↓
         ┌──────────┐
         │ user.js  │
         └──────────┘

              ↓
           Webpack
              ↓
          bundle.js

Webpack juga dapat melakukan minification dalam proses build.

12. Bundling itu apa?

Bundling = menggabungkan/mengemas module-module menjadi output bundle.

Misalnya kita punya:

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

Tanpa bundling:

Browser
  ├── app.js
  ├── user.js
  ├── product.js
  ├── cart.js
  └── order.js

Dengan bundling, secara sederhana bisa menjadi:

Browser
  └── bundle.js

Tentunya Webpack modern juga bisa menghasilkan beberapa chunk, bukan harus selalu satu file.

13. Minification itu apa?

Selain bundling, Webpack dapat melakukan minification.

Misalnya kode kita:

function calculateTotal(price, quantity) {
    const total = price * quantity;
    return total;
}

Bisa dibuat lebih ringkas menjadi sesuatu seperti:

function calculateTotal(t,q){return t*q}

Tujuannya:

mengurangi ukuran file JavaScript

Semakin kecil file:

ukuran download ↓
waktu transfer ↓

14. webpack-cli

Sekarang pertanyaannya:

Kalau Webpack adalah tool-nya, bagaimana kita menjalankan Webpack dari terminal?

Jawabannya:

webpack-cli

CLI = Command Line Interface

Jadi kita bisa memberikan command Webpack melalui terminal.

Misalnya konsepnya:

webpack

atau:

webpack --config webpack.config.js

Jadi:

Webpack
   ↑
webpack-cli
   ↑
Terminal

Analogi

Anggap:

• Webpack = mesin
• webpack-cli = panel kontrol
• terminal = tempat kita memberikan perintah

Tanpa CLI, kita tidak punya interface command-line yang digunakan lecture untuk menjalankan command Webpack.

15. webpack-dev-server

Ini sangat penting untuk development.

Webpack Dev Server menyediakan development server.

Misalnya aplikasi kita bisa dijalankan melalui server lokal seperti:

localhost

Yang menarik adalah fitur watching.

Misalnya kita mengubah:

const user = new User("John");

menjadi:

const user = new User("David");

Lalu kita save.

Dev server bisa mendeteksi:

File berubah
    ↓
Webpack mendeteksi perubahan
    ↓
Compile/build ulang
    ↓
Update aplikasi

Jadi kita tidak perlu melakukan semuanya secara manual.

16. Analogi webpack-dev-server

Bayangkan kamu sedang membuat rumah.

Tanpa dev server:

ubah kode
↓
save
↓
compile manual
↓
refresh manual
↓
lihat hasil

Dengan dev server:

ubah kode
↓
save
↓
Webpack mendeteksi
↓
compile ulang
↓
aplikasi diperbarui

Makanya development menjadi lebih nyaman.

17. Apa bedanya Webpack dengan Webpack Dev Server?

Jangan sampai tertukar.

Webpack

Fokus pada:

build
bundle
process modules
minify

Webpack Dev Server

Fokus pada:

menjalankan aplikasi selama development
watch perubahan
rebuild
update aplikasi

Sederhananya:

Webpack
= mesin pembuat bundle

Webpack Dev Server
= lingkungan development yang menggunakan Webpack

18. Kenapa TypeScript di-install lagi?

Ini bagian yang sangat penting dari lecture.

Sebelumnya TypeScript sudah di-install secara global.

Misalnya:

npm install -g typescript

Jadi komputer kita sudah memiliki TypeScript secara global.

Lalu kenapa project masih install:

npm install --save-dev typescript

?

Karena versi TypeScript sebaiknya dikunci per project.

19. Masalah kalau hanya menggunakan TypeScript global

Misalnya hari ini project kita dibuat menggunakan:

TypeScript 5.0

Kemudian dua tahun lagi muncul:

TypeScript 7.0

Kita install global:

npm install -g typescript

Sekarang TypeScript global kita menjadi:

7.0

Padahal project lama dibuat menggunakan:

5.0

Kalau project bergantung pada TypeScript global, perubahan tersebut berpotensi menyebabkan masalah.

Misalnya versi baru memiliki breaking changes.

20. Solusinya: install TypeScript per project

Dengan:

npm install --save-dev typescript

project mencatat versi TypeScript-nya:

{
  "devDependencies": {
    "typescript": "^5.x.x"
  }
}

Jadi:

Project A
└── TypeScript versi 5.x

Project B
└── TypeScript versi 6.x

Masing-masing project bisa memiliki environment yang berbeda.

21. Analogi sederhana TypeScript global vs local

Bayangkan kamu punya:

TypeScript global

Seperti:

🛠️ alat yang tersedia di seluruh rumah.

Semua project bisa mencoba menggunakan alat tersebut.

TypeScript local

Seperti:

📦 alat yang disimpan khusus di dalam project.

Project tersebut tahu persis versi alat yang dia gunakan.

Jadi:

Global TypeScript
       ↓
versi komputer saat ini

Local TypeScript
       ↓
versi khusus project

Untuk project yang serius, local/project dependency jauh lebih aman dan reproducible.

22. Apa itu ts-loader?

Nah, ini salah satu package yang paling penting untuk memahami hubungan:

TypeScript + Webpack

Webpack pada dasarnya bekerja dengan JavaScript/module dan berbagai asset melalui konfigurasi/loaders.

Kalau Webpack menemukan:

user.ts

Webpack perlu tahu:

“Bagaimana saya harus memproses file .ts ini?”

Di sinilah:

ts-loader

digunakan.

23. Apa tugas ts-loader?

Secara sederhana:

.ts
 ↓
ts-loader
 ↓
TypeScript processing
 ↓
.js
 ↓
Webpack bundle

Jadi ts-loader menjadi penghubung antara TypeScript dan Webpack.

24. Analogi ts-loader

Bayangkan Webpack adalah seorang chef.

Dia menerima:

.ts

Tetapi dia tidak otomatis tahu cara memasaknya.

ts-loader adalah:

👨‍🍳 penerjemah/resep khusus TypeScript

Dia membantu Webpack memahami bagaimana file TypeScript diproses.

Gambaran sederhananya:

TypeScript file
      │
      ↓
  ts-loader
      │
      ↓
JavaScript/module
      │
      ↓
   Webpack
      │
      ↓
 bundle

25. Jadi apakah ts-loader sama dengan TypeScript?

Tidak.

Ini perbedaan penting.

TypeScript

adalah bahasa + compiler ecosystem untuk mengubah:

TypeScript → JavaScript

ts-loader

adalah loader yang membuat Webpack dapat memproses file TypeScript melalui compiler TypeScript.

Jadi jangan berpikir:

ts-loader = TypeScript

Lebih tepat:

TypeScript
    ↑
digunakan oleh
    ↑
ts-loader
    ↑
dipanggil dalam proses
    ↑
Webpack

26. Bagaimana semuanya bekerja bersama?

Ini inti lecture.

Kita punya source code:

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

Kemudian:

                TypeScript files
                       │
                       ↓
                  ts-loader
                       │
                       ↓
                 JavaScript
                       │
                       ↓
                    Webpack
                       │
             ┌─────────┴─────────┐
             ↓                   ↓
         bundling            minification
             │                   │
             └─────────┬─────────┘
                       ↓
                   bundle.js
                       │
                       ↓
                    Browser

27. Fungsi kelima package dalam satu tabel

Kalau mau menghafal:

Webpack = bundler Webpack CLI = command Webpack Dev Server = development server TypeScript = compiler ts-loader = jembatan TypeScript ↔ Webpack

28. Hubungan semua package

Coba lihat diagram ini:

                    PROJECT
                       │
                       ↓
                package.json
                       │
           ┌───────────┼────────────┐
           ↓           ↓            ↓
      TypeScript    Webpack     Dev Server
           │           │            │
           ↓           ↓            ↓
      ts-loader ←──── Webpack ──→ development
                       ↑
                       │
                  webpack-cli
                       ↑
                       │
                    terminal

Ini memang terlihat banyak package, tetapi masing-masing punya tugas berbeda.

29. Kenapa lecture install TypeScript walaupun sudah global?

Ini kemungkinan pertanyaan terbesar dari lecture.

Jawaban singkatnya:

Global TypeScript
= convenience untuk komputer

Local TypeScript
= dependency project

Contoh:

Komputer
│
├── Global TypeScript 7.x
│
├── Project A
│    └── TypeScript 5.x
│
└── Project B
     └── TypeScript 6.x

Dengan cara ini, project tidak terlalu bergantung pada kondisi global komputer.

30. Kenapa package-lock.json juga biasanya muncul?

Lecture mungkin belum membahas ini secara detail, tetapi setelah:

npm install

biasanya selain:

node_modules/
package.json

akan muncul:

package-lock.json

Fungsinya untuk mencatat dependency tree dan versi dependency yang lebih spesifik.

Jadi secara sederhana:

package.json
      ↓
dependency yang project minta

package-lock.json
      ↓
versi/detail dependency yang dikunci npm

node_modules
      ↓
dependency yang ter-install

Ini membantu agar instalasi dependency lebih konsisten.

31. Kenapa node_modules tidak perlu kita commit ke Git?

Karena ukurannya bisa sangat besar dan isinya bisa dibuat ulang dari:

package.json
+
package-lock.json

Misalnya project dikirim ke komputer lain.

Tidak perlu mengirim seluruh:

node_modules/

Cukup:

package.json
package-lock.json
source code

Kemudian jalankan:

npm install

npm akan meng-install dependency kembali.

Biasanya node_modules dimasukkan ke:

.gitignore

32. Alur lengkap project setelah lecture ini

Sekarang project kita kira-kira menjadi:

project/
│
├── node_modules/
│
├── src/
│   ├── app.ts
│   ├── models/
│   │   └── user.ts
│   └── user-utils/
│       └── user-action.ts
│
├── package.json
│
└── package-lock.json

Dan package.json memiliki:

{
  "devDependencies": {
    "typescript": "...",
    "ts-loader": "...",
    "webpack": "...",
    "webpack-cli": "...",
    "webpack-dev-server": "..."
  }
}

Ini berarti:

“Project ini membutuhkan lima tools tersebut untuk proses development/build.”

33. Satu hal yang perlu diluruskan dari lecture

Dosen mengatakan kurang lebih:

“ts-loader tells webpack how to convert TypeScript code to JavaScript”

Sebagai pemahaman pemula, ini cukup benar.

Tetapi secara lebih presisi:

ts-loader

menghubungkan Webpack dengan TypeScript compiler sehingga Webpack dapat memproses .ts files.

Jadi jangan membayangkan ts-loader sebagai compiler TypeScript yang berdiri sendiri.

Lebih tepat:

Webpack
   │
   ↓
ts-loader
   │
   ↓
TypeScript compiler
   │
   ↓
JavaScript

Kemudian hasilnya diproses dalam pipeline Webpack.

34. Apa yang sudah dilakukan dan apa yang belum?

Lecture ini belum benar-benar melakukan konfigurasi Webpack.

Yang dilakukan baru:

Step 1

Membuat project configuration:

npm init

Step 2

Install Webpack dan tools:

npm install --save-dev ...

Step 3

Memahami fungsi setiap package.

Belum masuk ke:

webpack.config.js

Belum menentukan:

entry
output
module
rules
plugins
devServer

Itu kemungkinan masuk di lecture berikutnya.

35. Mental model yang paling penting

Kalau kamu ingin mengingat lecture ini tanpa menghafalkan semua detail, cukup ingat:

                package.json
                     │
                     ↓
             daftar kebutuhan
                     │
                     ↓
                npm install
                     │
                     ↓
               node_modules
                     │
          ┌──────────┼──────────┐
          ↓          ↓          ↓
     TypeScript   Webpack    Dev Server
          │          │
          ↓          ↓
     ts-loader   webpack-cli
          │          │
          └────┬─────┘
               ↓
            Webpack
               ↓
        bundle JavaScript
               ↓
            Browser

36. Ringkasan super singkat

Lecture ini pada dasarnya mengatakan:

“Sebelum menggunakan Webpack, kita harus menyiapkan project environment dan meng-install tools yang diperlukan.”

Urutannya:

npm init
   ↓
package.json dibuat
   ↓
npm install --save-dev ...
   ↓
node_modules dibuat
   ↓
devDependencies dicatat
   ↓
Webpack siap dikonfigurasi

Dan kelima package tadi:

webpack
→ bundler

webpack-cli
→ menjalankan command Webpack

webpack-dev-server
→ server development + automatic rebuild

typescript
→ compiler TypeScript

ts-loader
→ penghubung TypeScript dengan Webpack

🧠 Kalimat pengingat

TypeScript menulis dan meng-compile kode, ts-loader membantu Webpack memahami TypeScript, Webpack membundlenya, webpack-cli menjalankannya dari terminal, dan webpack-dev-server membuat proses development menjadi lebih nyaman.

Jadi setelah lecture ini, project belum selesai dikonfigurasi. Kita baru menyiapkan “alat-alatnya”. Lecture berikutnya kemungkinan besar akan masuk ke webpack.config.js, yaitu tempat kita memberi tahu Webpack entry file mana yang harus dibaca, output-nya ke mana, bagaimana menangani .ts, dan bagaimana menjalankan development server.