Webpack untuk Pemula

Di postingan sebelumnya kita udah maen javascript tanpa make webpack. Naah dipostingan ini kita bakalan naroin webpack. Jadi klu yg belum liad2 postingan sebelumnya... Silahkan lihat disini...

Github untuk postingan ini bisa dilihat disini....
Ok... pertama-tama sebelum install webpack, kita harus install nodejs dl... di sini Hisoka pake node js versi 6.11.1

Nah... setelah install nodejs, berikutnya kita inisialisasi projectnya dl... jalanin 'npm init' terus ikuti langkah2 yg terlihat diconsole...

Naah...tinggal ketik YES... dan enter... trs kita dapat file package.json yg isinya kek gini :

Terus berikutnya baru kita install webpacknya. Tinggal running command ini :
npm i webpack --save-dev

--save-dev itu nunjukin klu webpack syarat dipake buat development....

Nah stelah slese diinstall kita bisa liad perubahannya dengan penambahan folder node_modules sama di package.jsonnya...

Berikutnya kita kasih tau webpacknya buat ngebuild file app.js. So tambain gini di package.json :

Siipss... jadi webpacknya bakalan nyari file app.js ters hasil kompilasinya ditaro di folder dist/bundle.js... Ok next kita ubah kode javascript di app.js soalnya dia bakalan diload sm webpacknya pertama kali... so beralih ke app.js dan ubah jadi kek gini :

Siipss... cuma nambain import bla bla dari file poipo-dom-loader.js.. .Ters kita ubah juga poipo-dom loadernya kek gini biar bisa di import :

Siiipss... daaah deeeeh.... tinggal running webpacknya pake command :
npm run poipo_build 
Hasilnya :

Setelah berhasil di build kita liad ada folder baru 'dist' yg isinya bundle.js.... naah bundle.js ini kita load ke file.htmlnya kek gini :

Daaan... Hasilnya...

Siipss... daaah....

Btw... 1 tambahan... buat ngekompile webpack, kita bisa pake minified version. Minified version itu biasanya buat production. Jadi bundle.js-nya lebih kecil file sizenya... Nah cara buat bikin kayak gitu kita tambain kode berikut di package.json...

So tinggal ditambain flag '-p' ajjah.. itu maksnya build buat production... Trs klu kita pengen build tinggal pake "npm run poipo_build_prod"... bundle.js-nya dikomparasi klu pake -p dan g' pake -p...

Naah.. tuh.. file sizenya cm skitar 1kB,,,beda klu g' pake -p yg sizenya sekitar 4kB... dan berikut komparasi isi bundle.js-nya...
Klu g' pake -p :

Klu pake -p :

Siiipsss... sekian dl untuk part ini... sampai jumpa di part berikutnya... :)