Pernah dengar Webpack tapi bingung cara pakenya? Atau mungkin malah belum pernah dengar sama sekali. Dalam buku tipis ini dibahas apa itu Webpack, instalasi, dan konfigurasinya.
Webpack adalah salah satu bundler yang populer. Tapi buat pemula yang belum pernah pake Webpack, instalasi dan konfigurasinya relatif bikin bingung. Ada banyak variasi contoh konfigurasi yang bisa dicari di Google atau Stack Overflow, yang mungkin malah bikin bingung.
Misalnya kita punya project web dengan konfigurasi environment yang beda antara dev & production (seperti normalnya projek web) kayak gini:
| DEV | PRODUCTION | |
|---|---|---|
| DB | 192.168.0.99 | 192.168.0.100 |
| Assets | dev.assets.com | live.assets.com |
| API | server1.api.com | server2.api.com |
Ada beberapa cara untuk pake variabel-variabel itu di aplikasi kita antara lain:
dev.env.js atau prod.env.js ke file HTML dalam bentuk tag <script>env.js yang isinya bisa dev atau production vars tergantung di direktori mana dia dibuat. File ini nanti dimuat oleh aplikasi pake <script>. Untuk projek yang pake ES6 & Webpack, ada cara yang menurut saya lebih sip. Intinya environment vars kita bikin sebagai modul ES6, jadi bisa diimpor kayak modul ES6 biasa.
Kita bikin dua file, satu untuk masing-masing env:
//file: dev.env.js
export default {
type:'dev',
db:'192.168.0.99',
assets:'dev.assets.com',
api:'server1.api.com'
}
Satu lagi untuk production:
//file: production.env.js
export default {
type:'production',
db:'192.168.0.100',
assets:'live.assets.com',
api:'server2.api.com'
}
Di file index.js & semua file yang butuh baca environment vars:
//file: index.js
//import pake nama alias, jadi modul ini (index)
//nggak perlu tau itu file dev.env.js atau prod.env.js.
import CONFIG from 'env-config';
console.log('CONFIG',CONFIG);
Gimana caranya supaya skrip *.env.js bisa dipake sebagai modul kayak di atas?
Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.
Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.
Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.
Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.
$ yarn global add poi
#atau
$ npm install -g poi