Slide 1
Slide 1 text
Dicoding Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore.
Front-End Web
Slide 2
Slide 2 text
Position
Bundel Kode dengan
Module Bundler
Front-End Web
Nur Rizki Adi
Curriculum Developer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Learning Objectives
● Memahami konsep dari teknik module bundler.
● Memahami saat-saat yang tepat dari pemanfaatannya.
● Menunjukkan vendor-vendor yang berperan dalam teknik bundling.
● Menjelaskan konsep-konsep inti yang diadopsi oleh webpack.
● Menunjukkan cara menyusun konfigurasi webpack pada proyek.
Front-End Web
Slide 5
Slide 5 text
Agenda
● Apa Itu Module Bundler
● Contoh Kasus sebagai Tempat Module Bundler Berperan
● Vendor-Vendor yang Berperan sebagai Module Bundler
● Konsep Kerja Webpack
● Struktur Konfigurasi Webpack
Front-End Web
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Manakah tipe kalian?
Front-End Web
A. Satu file JavaScript untuk semua.
B. Satu hanya untuk kebutuhan spesifik.
Slide 8
Slide 8 text
One specific file for specific feature…
Slide 9
Slide 9 text
One file for everything?
Slide 10
Slide 10 text
Bundle many files to one files only!
Slide 11
Slide 11 text
Module Bundler
Slide 12
Slide 12 text
Apa Itu Module Bundler
Teknik menggabungkan beragam
kode JavaScript (banyak berkas)
menjadi satu berkas saja yang siap
di tahap production (rilis).
Slide 13
Slide 13 text
Mari Analogikan!
Untuk memudahkan pengenalan
terhadap konsep module bundler,
mari kita lakukan permisalan dengan
suatu hal yang sangat menarik!
Slide 14
Slide 14 text
Bayangkan! Kita berencana wisata dengan
mendaki gunung/bukit.
Slide 15
Slide 15 text
Jadi, apa perlu kita
siapkan?
Slide 16
Slide 16 text
Module Bundler
Hiking Bag
Slide 17
Slide 17 text
Di mana kita dapat mengelola dan
mengombinasikan beragam berkas
JavaScript (module) menjadi satu
berkas saja yang siap pakai.
Mirip dengan
Module Bundler
Slide 18
Slide 18 text
Real Case!
Slide 19
Slide 19 text
● Menampilkan daftar belanja sesuai rancangan penggunanya.
● Bayangkan, ada banyak kode (module) yang digunakan oleh
developer.
○ Kode JavaScript orang lain (third-party packages).
○ Framework untuk membangun tampilan, baik CSS maupun JS.
○ Membuat kode sendiri untuk mengelola perilaku navigasi bar,
animasi, dsb. pada berkas terpisah.
○ Menyiapkan kode untuk proses CRUD, dan banyak lagi lainnya.
Contoh Kasus: Aplikasi Daftar Belanja
Slide 20
Slide 20 text
Impor Beragam JavaScript demi Aplikasi
Slide 21
Slide 21 text
Impor Beragam JavaScript demi Aplikasi
Slide 22
Slide 22 text
Hadeuh…
Kewalahan 😓
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
● Ada banyak berkas yang didaftarkan. Urutannya pun menjadi hal
yang sangat vital.
● Setiap berkas kode JavaScript dapat di-combine menjadi satu
bundel berkas JavaScript saja yang siap pakai, baik kode dari
penulis itu sendiri atau pihak lain.
● Tool yang digunakan untuk mencapai ini adalah module bundler.
Contoh Kasus: Aplikasi Daftar Belanja (cont.)
Slide 25
Slide 25 text
Impor Beragam JavaScript Demi Aplikasi
Slide 26
Slide 26 text
Module bundler yang akan kita pelajari!
Beragam Vendor sebagai Module Bundler
Webpack Vite Parcel Browserify
Slide 27
Slide 27 text
Konsep Kerja
Webpack
Slide 28
Slide 28 text
Konsep Kerja Webpack
● Entry point
● Output
● Loader
● Plugin
● Mode
Slide 29
Slide 29 text
Struktur Konfigurasi
Webpack
Slide 30
Slide 30 text
Live Demo
Web Clock
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
webpack.js.org
Slide 33
Slide 33 text
Thank You
nurrizkiadip
Nur Rizki Adi Prasetyo
@NAdiPrasetyo
[email protected]
Nur Rizki Adi Prasetyo
Nur Rizki Adi Prasetyo
Front-End Web
Slide 34
Slide 34 text
Feedback!
Hadiah:
● 2 Token Langganan Academy (30 Hari)
*untuk pengisi feedback terpilih!
dicoding.id/devcoachfeedback
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Front-end Web