Lecture ini membahas Webpack Dev Server, yaitu bagaimana menjalankan project menggunakan server development milik Webpack sehingga ketika kita mengubah kode, aplikasi bisa otomatis di-compile dan di-update tanpa harus menjalankan build manual setiap kali.

Saya akan jelaskan dari konsep dasarnya dulu, lalu masuk ke setiap konfigurasi yang digunakan di lecture.

1. Gambaran besar lecture ini

Sebelumnya kita menjalankan project kira-kira seperti ini:

TypeScript
   ↓
Webpack
   ↓
bundle.js
   ↓
Browser

Dan kita menjalankan build dengan:

npm run build

Masalahnya, setiap kali kita mengubah kode:

ubah kode
   ↓
npm run build
   ↓
refresh browser

Itu cukup merepotkan.

Webpack Dev Server dibuat untuk membuat proses development menjadi lebih nyaman:

ubah kode
   ↓
Webpack otomatis compile
   ↓
browser development server otomatis update

Jadi kita tidak perlu terus-menerus melakukan build secara manual.

2. Sebelumnya kita menggunakan Live Server

Di VS Code, biasanya kita bisa menggunakan extension Live Server.

Misalnya project kita:

project/
├── index.html
├── style.css
└── dist/
    └── bundle.js

Kita bisa klik:

Go Live

Kemudian VS Code menjalankan sebuah development server.

Misalnya:

http://127.0.0.1:5500

atau port lain.

Lecture ini ingin mengganti mekanisme tersebut.

Sebelumnya:

VS Code Live Server
       ↓
     Browser

Sekarang:

Webpack Dev Server
       ↓
     Browser

Jadi kita tidak lagi bergantung pada extension Live Server.

3. Kita sudah meng-install Webpack Dev Server

Sebelumnya kita menjalankan:

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

Di sini terdapat:

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

Yang paling penting untuk lecture ini adalah:

webpack-dev-server

Fungsinya adalah menyediakan development server untuk project kita.

4. Menambahkan start script

Di package.json, sebelumnya kita mungkin punya:

{
  "scripts": {
    "build": "webpack"
  }
}

Sekarang lecture menambahkan:

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  }
}

Perhatikan:

"start": "webpack serve"

Artinya ketika kita menjalankan:

npm start

npm akan menjalankan:

webpack serve

5. Apa bedanya npm run build dan npm start?

Ini penting.

npm run build

Menjalankan:

webpack

Tujuannya:

membuat production/build output.

Misalnya:

src/
   ↓
Webpack
   ↓
dist/bundle.js

npm start

Menjalankan:

webpack serve

Tujuannya:

menjalankan Webpack Dev Server untuk development.

Jadi secara sederhana:

6. Ketika menjalankan npm start

Lecture kemudian menjalankan:

npm start

Webpack memberikan informasi seperti:

Project is running at:
http://localhost:8080/

Artinya Webpack Dev Server sudah berjalan di:

localhost:8080

Tetapi ketika URL tersebut dibuka, ternyata aplikasi tidak muncul.

Kenapa?

7. Masalah pertama: Webpack mencari static files di public

Secara default, Webpack Dev Server menganggap static files berada di folder tertentu, biasanya:

public/

Kurang lebih Webpack berharap menemukan:

project/
├── public/
│   ├── index.html
│   └── style.css
│
├── src/
│   └── app.ts
│
└── webpack.config.js

Tetapi project kita tidak seperti itu.

Project kita mungkin:

project/
├── index.html
├── style.css
├── src/
│   ├── app.ts
│   ├── models/
│   │   └── user.ts
│   └── user-utils/
│       └── user-action.ts
│
├── dist/
│   └── bundle.js
│
├── package.json
└── webpack.config.js

Jadi:

index.html
style.css

berada langsung di root project, bukan di:

public/

Webpack Dev Server belum tahu hal tersebut.

8. Kita harus memberi tahu Webpack lokasi static files

Di webpack.config.js, kita menambahkan:

devServer: {
  static: {
    directory: path.resolve(__dirname, ".")
  }
}

Secara lengkap kira-kira:

const path = require("path");

module.exports = {
  entry: "./src/app.ts",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: [".ts", ".js"]
  },

  devtool: "inline-source-map",

  devServer: {
    static: {
      directory: path.resolve(__dirname, ".")
    }
  }
};

9. Memahami devServer

Bagian:

devServer: {
  ...
}

adalah konfigurasi khusus untuk Webpack Dev Server.

Jadi jangan bingung dengan:

module: {
  rules: [...]
}

dan:

devServer: {
  ...
}

Mereka punya fungsi berbeda.

module
   ↓
Bagaimana Webpack memproses file?

devServer
   ↓
Bagaimana development server dijalankan?

10. Memahami static

Di dalam:

devServer: {
  static: {
    directory: ...
  }
}

static memberitahu Webpack:

“File-file static saya ada di mana?”

Static files contohnya:

index.html
style.css
gambar
font
favicon

11. Memahami path.resolve(__dirname, ".")

Ini bagian yang cukup penting:

path.resolve(__dirname, ".")

Kita sudah membahas __dirname sebelumnya.

__dirname menunjukkan lokasi absolut folder project.

Misalnya project berada di:

C:\Projects\my-app

Maka:

__dirname

kurang lebih menghasilkan:

C:\Projects\my-app

Kemudian:

path.resolve(__dirname, ".")

berarti:

“Ambil lokasi project saat ini.”

. berarti:

current directory

atau:

folder saat ini.

Jadi:

path.resolve(__dirname, ".")

memberitahu:

“Static files saya berada di root folder project.”

12. Mengapa harus menggunakan path.resolve?

Webpack membutuhkan path yang jelas, dan untuk konfigurasi ini kita menggunakan absolute path.

Misalnya:

C:\Projects\my-app

bukan sekadar:

.

Maka kita gunakan:

path.resolve(__dirname, ".")

13. Masalah kedua: bundle JavaScript tidak benar-benar dibuat di disk

Setelah konfigurasi static files diperbaiki, aplikasi mulai muncul.

Kemudian lecturer mengubah:

console.log("app is running");

Misalnya:

console.log("User application");
console.log("app is running");

Webpack mengatakan:

compiled successfully

Tetapi ketika melihat browser, pesan baru tersebut tidak muncul.

Ini membingungkan.

Bukankah Webpack sudah compile?

Ya.

Webpack memang sudah compile.

Masalahnya adalah di mana hasil compile tersebut disimpan dan bagaimana Dev Server membacanya.

14. Konsep penting: Webpack Dev Server menggunakan memory

Ketika menggunakan:

npm start

dengan Webpack Dev Server, bundle hasil compilation pada development mode biasanya disimpan di memory, bukan sebagai file fisik yang ditulis ke disk.

Bayangkan seperti ini.

Build biasa

src/app.ts
     ↓
Webpack
     ↓
dist/bundle.js
     ↓
file benar-benar ada di disk

Sedangkan Dev Server:

src/app.ts
     ↓
Webpack
     ↓
bundle.js
     ↓
RAM / memory
     ↓
Webpack Dev Server
     ↓
Browser

Jadi bundle.js bisa ada secara virtual di memory tanpa kita melihat file baru/ter-update di folder dist.

15. Kenapa menggunakan memory?

Karena ini lebih cepat untuk development.

Bayangkan kita sedang mengerjakan aplikasi dan mengubah kode 100 kali.

Kalau setiap perubahan harus:

compile
   ↓
tulis bundle.js ke disk
   ↓
server membaca file
   ↓
browser update

akan ada proses tambahan.

Dev server dapat bekerja lebih efisien dengan menyimpan hasil build di memory.

Mental model sederhananya:

Development:
Kode → compile → memory → browser

Production/build:
Kode → compile → file bundle → deploy

16. Apa itu publicPath?

Lecture kemudian menambahkan:

output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "/dist/"
}

Bagian pentingnya:

publicPath: "/dist/"

Ini memberitahu Webpack:

“Bundle yang dihasilkan bisa diakses melalui path /dist/.”

Kenapa diperlukan?

Karena ada perbedaan antara:

output.path

dan:

output.publicPath

17. Bedakan output.path dan publicPath

Ini salah satu bagian yang paling mudah membingungkan.

output.path

Menentukan lokasi output secara fisik ketika Webpack melakukan output ke filesystem.

Contoh:

path: path.resolve(__dirname, "dist")

berarti:

project/
└── dist/

publicPath

Menentukan URL/path yang digunakan untuk mengakses asset yang dihasilkan Webpack.

Misalnya:

publicPath: "/dist/"

Maka secara konsep:

/dist/bundle.js

adalah lokasi publik bundle tersebut.

Jadi:

output.path
    ↓
"di mana file/output berada?"

publicPath
    ↓
"melalui URL/path apa asset itu diakses?"

18. Kenapa publicPath penting pada Dev Server?

Karena bundle-nya berada di memory.

Browser tetap perlu tahu:

“Saya harus mengambil bundle JavaScript dari mana?”

Dengan:

publicPath: "/dist/"

kita memberi tahu Webpack lokasi publiknya.

Maka alurnya kira-kira:

index.html
    ↓
minta /dist/bundle.js
    ↓
Webpack Dev Server
    ↓
ambil bundle dari memory
    ↓
kirim ke browser

Perhatikan:

bundle-nya tidak harus benar-benar ada sebagai file fisik di dist/ saat dev server berjalan.

19. Setelah itu muncul warning mode

Webpack kemudian memberikan warning seperti:

The 'mode' option has not been set

Artinya kita belum menentukan:

Webpack sedang bekerja dalam mode apa?

Webpack memiliki dua mode yang paling penting:

development
production

Untuk lecture ini kita sedang development.

Maka kita tambahkan:

mode: "development"

Contohnya:

module.exports = {
  mode: "development",

  entry: "./src/app.ts",

  ...
};

20. Apa itu mode: "development"?

Ini memberitahu Webpack:

“Saya sedang mengembangkan aplikasi, jadi prioritaskan pengalaman developer.”

Webpack kemudian tidak terlalu agresif melakukan optimasi.

Tujuannya agar:

• debugging lebih mudah
• error lebih mudah dipahami
• proses development lebih nyaman
• build development lebih cepat

21. Lalu apa mode: "production"?

Kalau:

mode: "production"

kita memberitahu:

“Aplikasi ini akan digunakan untuk production.”

Webpack akan melakukan lebih banyak optimasi.

Misalnya:

source code
   ↓
Webpack
   ↓
optimasi
   ↓
minification
   ↓
bundle lebih kecil

Tujuannya:

meningkatkan performa aplikasi yang akan diberikan kepada user.

22. Development vs Production

Ini sangat penting untuk dipahami.

Analogi sederhananya:

Development

Seperti kita sedang membuat mobil di bengkel.

Kita ingin:

• kap mesin mudah dibuka
• komponen mudah diperiksa
• alat diagnosis mudah digunakan
• semuanya mudah diperbaiki

Production

Mobil sudah mau dijual.

Kita ingin:

• performa optimal
• efisien
• ukuran/biaya serendah mungkin
• tidak membawa alat-alat bengkel

23. Bagian paling menarik: otomatis compile

Sekarang setelah menjalankan:

npm start

Webpack Dev Server terus berjalan.

Misalnya kita punya:

console.log("Hello");

Lalu kita ubah menjadi:

console.log("Hello World");

Webpack Dev Server mendeteksi perubahan:

File berubah
     ↓
Webpack mendeteksi
     ↓
compile ulang
     ↓
bundle diperbarui
     ↓
Dev Server menyediakan hasil baru
     ↓
browser diperbarui

Inilah yang dimaksud live development server.

24. Tapi hati-hati: compile otomatis ≠ selalu full page refresh

Lecture menggunakan istilah live development server secara umum.

Secara konsep ada beberapa mekanisme:

Watch
    ↓
compile ulang

Live reload
    ↓
refresh browser

Hot Module Replacement (HMR)
    ↓
update module tertentu tanpa full reload

Webpack Dev Server modern dapat mendukung mekanisme seperti HMR.

Jadi jangan menyamakan semua istilah ini sebagai hal yang persis sama.

Untuk level lecture ini, cukup pahami:

Webpack Dev Server membantu kita melihat perubahan kode dengan cepat selama development.

25. Gambaran seluruh proses

Setelah konfigurasi selesai, alurnya menjadi:

                  ┌──────────────┐
                  │  index.html  │
                  └──────┬───────┘
                         │
                         ↓
                 Webpack Dev Server
                         │
                         ↓
                  ┌──────────────┐
                  │  app.ts      │
                  └──────┬───────┘
                         ↓
                    ts-loader
                         ↓
                  TypeScript → JS
                         ↓
                    Webpack
                         ↓
                  bundle.js
                         ↓
                      Memory
                         ↓
                 Dev Server
                         ↓
                     Browser

Sementara static files seperti:

index.html
style.css

dilayani dari:

devServer.static.directory

26. Jadi ada dua hal berbeda yang perlu dipahami

Ini penting sekali.

Webpack Dev Server menangani dua jenis hal:

A. Static files

Misalnya:

index.html
style.css
images

Dikonfigurasi melalui:

devServer: {
  static: {
    directory: ...
  }
}

B. Bundle hasil Webpack

Misalnya:

bundle.js

Dihasilkan oleh:

entry
   ↓
Webpack
   ↓
bundle

dan lokasi publiknya dapat dikontrol dengan:

output.publicPath

27. Konfigurasi akhir secara konseptual

Kurang lebih konfigurasi lecture menjadi:

const path = require("path");

module.exports = {
  mode: "development",

  entry: "./src/app.ts",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/"
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: [".ts", ".js"]
  },

  devtool: "inline-source-map",

  devServer: {
    static: {
      directory: path.resolve(__dirname, ".")
    }
  }
};

Dan package.json:

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  }
}

Kemudian:

npm start

28. Apa yang sebenarnya terjadi ketika npm start?

Mari kita pecah super detail.

Kita mengetik:

npm start

Step 1 — npm membaca package.json

npm menemukan:

"start": "webpack serve"

Step 2 — npm menjalankan Webpack Dev Server

webpack serve

Step 3 — Webpack membaca webpack.config.js

Webpack melihat:

entry: "./src/app.ts"

Artinya:

Mulai dependency graph dari app.ts.

Step 4 — Webpack menemukan TypeScript

Webpack menemukan:

app.ts

Kemudian rule:

test: /\.ts$/

cocok dengan file tersebut.

Step 5 — ts-loader bekerja

use: "ts-loader"

Artinya:

Gunakan ts-loader untuk memproses .ts.

ts-loader menggunakan TypeScript compiler untuk membantu mengubah TypeScript menjadi JavaScript.

Step 6 — Webpack mengikuti dependency

Misalnya:

import User from "./models/user";

Webpack akan mencari module tersebut.

Dengan:

resolve: {
  extensions: [".ts", ".js"]
}

Webpack bisa mencoba:

./models/user.ts
./models/user.js

Step 7 — Webpack membuat bundle

Semua dependency yang diperlukan dikumpulkan.

app.ts
 ↓
user-action.ts
 ↓
user.ts

menjadi dependency graph:

       app.ts
          │
          ↓
   user-action.ts
          │
          ↓
       user.ts

Kemudian Webpack membuat bundle.

Step 8 — Dev Server menyimpan hasil di memory

Dalam development server:

bundle
  ↓
memory

Step 9 — Browser mengakses server

Misalnya:

http://localhost:8080

Step 10 — Ketika source berubah

Misalnya:

console.log("Hello");

menjadi:

console.log("Hello Webpack");

Webpack Dev Server mendeteksi perubahan.

Kemudian:

recompile
   ↓
bundle baru
   ↓
memory diperbarui
   ↓
browser mendapatkan perubahan

29. Kenapa kita tidak perlu npm run build setiap perubahan?

Karena sebelumnya:

npm run build

adalah proses manual.

Sekarang:

npm start

menjalankan server yang tetap hidup dan memonitor perubahan.

Jadi:

Workflow lama

ubah code
   ↓
npm run build
   ↓
refresh
   ↓
ubah code lagi
   ↓
npm run build lagi
   ↓
refresh lagi

Workflow baru

npm start
   ↓
server hidup
   ↓
ubah code
   ↓
Webpack compile otomatis
   ↓
browser update
   ↓
ubah code lagi
   ↓
compile otomatis lagi

Jauh lebih nyaman.

30. Jangan tertukar: Live Server vs Webpack Dev Server

Keduanya sama-sama bisa menyediakan development server, tetapi perannya berbeda.

VS Code Live Server

Lebih sederhana:

HTML/CSS/JS
    ↓
Live Server
    ↓
Browser

Dia terutama berperan sebagai static development server + reload.

Webpack Dev Server

Lebih terintegrasi dengan Webpack:

TypeScript
    ↓
ts-loader
    ↓
Webpack
    ↓
bundle
    ↓
Dev Server
    ↓
Browser

Jadi Webpack Dev Server memahami proses build Webpack.

Ini sangat berguna ketika project kita semakin kompleks.

31. Kenapa Webpack Dev Server cocok untuk project Webpack?

Karena semuanya berada dalam satu workflow:

Source code
    ↓
Webpack
    ↓
Loader
    ↓
Bundle
    ↓
Dev Server
    ↓
Browser

Kita tidak perlu memisahkan:

satu tool untuk compile
+
satu tool untuk server
+
satu tool untuk reload

Webpack dapat mengorkestrasi proses development tersebut.

32. Satu hal penting tentang dist

Jangan berpikir:

“Kalau output.path adalah dist, berarti saat npm start bundle pasti terlihat di dist.”

Belum tentu.

Pada Dev Server, hasil bundle bisa berada di memory.

Jadi secara sederhana:

npm run build

dist/
└── bundle.js       ← output fisik

Sedangkan:

npm start

memory/
└── bundle.js       ← output virtual/in-memory

Inilah alasan lecture mengatakan bundle tidak di-generate ke disk pada development server.

33. Kenapa production berbeda?

Development dan production memiliki tujuan berbeda.

Ketika coding:

Developer
   ↓
butuh debugging
butuh source map
butuh error yang jelas
butuh compile cepat

Maka:

mode: "development"

Ketika aplikasi akan diberikan kepada user:

User
   ↓
butuh aplikasi cepat
butuh bundle efisien
butuh ukuran file kecil

Maka:

mode: "production"

34. Analogi paling gampang

Bayangkan Webpack adalah dapur restoran.

Source code kita:

app.ts
user.ts
user-action.ts

adalah bahan mentah.

Webpack:

Webpack

adalah chef.

ts-loader:

ts-loader

adalah orang yang menerjemahkan/mengolah bahan TypeScript supaya bisa diproses menjadi JavaScript.

bundle.js:

bundle.js

adalah makanan yang sudah siap disajikan.

Webpack Dev Server:

Dev Server

adalah restoran yang menyajikan makanan tersebut langsung ke pelanggan/browser.

Dalam development, kita tidak selalu perlu menyimpan makanan itu ke gudang (dist) setiap kali membuat perubahan.

Cukup:

ubah resep
   ↓
chef proses ulang
   ↓
hasil baru langsung disajikan

Itulah konsep in-memory development server.

35. Kesimpulan lecture

Inti lecture ini sebenarnya hanya beberapa konsep utama.

1. webpack-dev-server

Digunakan untuk menjalankan project melalui development server milik Webpack.

npm start

2. webpack serve

Biasanya dimasukkan ke:

"start": "webpack serve"

sehingga:

npm start

menjalankan Webpack Dev Server.

3. devServer.static

Memberitahu server lokasi static files:

devServer: {
  static: {
    directory: path.resolve(__dirname, ".")
  }
}

4. Bundle development biasanya berada di memory

Webpack
   ↓
bundle
   ↓
memory
   ↓
Dev Server
   ↓
Browser

bukan harus menjadi file fisik di dist.

5. publicPath

Memberitahu path publik tempat asset/bundle diakses:

publicPath: "/dist/"

6. mode

Untuk development:

mode: "development"

Untuk production:

mode: "production"

🧠 Mental model yang paling penting

Kalau ingin mengingat lecture ini, gunakan:

npm start
    ↓
webpack serve
    ↓
Webpack Dev Server
    ↓
ambil static files
    ↓
Webpack compile source
    ↓
bundle di memory
    ↓
browser

Dan ketika kode berubah:

ubah .ts
   ↓
Webpack mendeteksi
   ↓
compile ulang
   ↓
bundle memory diperbarui
   ↓
browser mendapatkan versi terbaru

Sedangkan pembagian konfigurasi utamanya:

ENTRY
   ↓
Mulai dari file mana?

RESOLVE
   ↓
Dependency dicari dengan extension apa?

MODULE / RULES
   ↓
File diproses menggunakan apa?

OUTPUT
   ↓
Bundle namanya apa dan output-nya di mana?

DEV SERVER
   ↓
Server development berjalan bagaimana?

MODE
   ↓
Development atau production?

Kalimat kunci lecture ini:

Webpack Dev Server membuat workflow development menjadi otomatis: kita cukup menjalankan npm start, lalu Webpack memonitor perubahan, melakukan compile ulang, dan menyediakan hasil terbaru melalui development server.