Simple Webpack 4 config teruntuk Simple React

Hello again bagi yang sudah pernah baca tulisan saya & mungkin ada yang kecewa karena saya ga nglanjutin tulisannya saya mohon maaf, karena cari waktu & inspirasi buat nulis itu ternyata susah… dan sewaktu udah nemuin ternyata webpack nya sudah upgrade 😂

Belajar dari pengalaman.. kali ini saya coba bikin one simple article aja dengan webpack 4 buat njalanin react project yang tentunya simple juga, cukup buat yang mau belajar react sekaligus webpack. Ehh… sebenernya ini juga buat saya sendiri sih yang udah lama ga ngoprek webpack karena terlalu nyaman sama create-react-app ~ 😬 ~ Ok let’s get started!

Seperti yang tercantum di document webpack, versi kali ini bakalan less configuration daripada versi sebelumnya:

Since version 4, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.

Menurut document setidaknya kita perlu mengetahui core concept dari si webpack ini buat mulai bikin config, nah… berikut ringkasan singkat nya:

1. Entry
   Di property entry inilah webpack akan memulai petualangan nya untuk nge-build code kita & default value untuk si entry ini berada di path berikut ./src/index.js
2. Output
   Path dari file hasil build webpack akan di simpan disini & default value nya sih di doc katanya./dist/bundle.js tapi setelah saya trial sendiri entah kenapa default nya ./dist/main.js silahkan di coba2 aja dulu, path nya bisa dilihat kok ketika nanti kita jalanin webpack-dev-server 😁
3. Loaders
   Property ini berfungsi semacam translater, berhubung webpack itu cuma ngerti bahasa jawascript ehh… javascript maksudnya, alias file dengan extension .js jadi kalau mau nambahin file dengan bahasa lain seperti .css atau file dengan extension lain seperti gambar .jpg anda butuh install loader yang bisa memproses bahasa atau extenstion tersebut.
4. Plugins
   Kalau loader cuma bertugas sebagai translater, plugins ini punya tugas yang lebih besar lagi seperti bundle optimization, assets management or injection of environment variables.

Demikian penjelasan singkat tentang webpack 4. Ok saya yakin udah pada greget buat lihat coding nya, let’s have fun now.

Berhubung kita bakal make react with es6, yakinlah mesti bakal pada mau pake es6 kan…? So kita perlu install dependencies dulu kalau gitu, eh iya saya pake yarn ya jadi jangan lupa install yarn dulu & yarn init di folder baru kalian buat project ini ~ Grab terminal & type this:

yarn add -D webpack webpack-cli webpack-dev-server babel-core babel-preset-env babel-preset-react babel-loader css-loader style-loader

install react nya jangan lupa…

yarn add react react-dom

Inti dari devDependencies yg kita install di atas itu karena kita mau pake react with es6 makanya kita butuh babel yang bisa nerjemahin es6 ke es5 karena belum semua browser itu support es6. Nah karena ada urusan terjemahan2 makanya ada babel-loader terus babel-preset-... itu buat apa? Silahkan check disini fullstackreact.com

🏃 kabur…

Kalau semua sudah di install let’s create webpack.config.js yang isinya sebagai berikut:

Berhubung ga mau ribet buat entry & output point kita pake default aja ya… jadi jangan lupa buat folder src & dist di root.

Balik lagi ke cerita tentang property webpack

1. devServer
   Berhubung kita mau mulai development pake server jadi kita butuh property ini.
   ~contentBase~
   Digunakan untuk memberi tahu dimanakah folder base yang akan kita serve untuk server kita.
   ~open~
   Untuk membuka browser atau new tab kalau browser memang sudah terbuka .
   ~inline~
   untuk keperluan hot reload, di beberapa case mungkin perlu di tambah option hot: true
2. mode
   Propery ini buat nentuin env kita, karena default value nya ke production so kita butuh define property ini ke development karena kita memang mau develop dulu.
3. module
   Nah disini kita harus define bahasa atau extension apa aja yang bakal kita pakai. Btw apa itu test, loader & use?
   ~test~
   property yang digunakan untuk mendefinisikan bahasa atau extension yang akan kita pakai menggunakan regex.
   ~loader~
   digunakan untuk mendefinisikan loader apakah yang akan kita pakai untuk translating nya.
   ~use~
   fungsi nya sama kayak loader hanya saja biasa digunakan untuk keperluan clean code bagi bahasa atau extension yang butuh di translate beberapa kali dengan loader.

Ok config webpack sudah selesai, mari kita buat satu config lagi untuk babel… monggo create .babelrc di folder root yang berisi sebagai berikut:

udah baca apa itu presets dari link diatas kan? nah mungkin bisa langsung cuss ke web nya babel untuk informasi lebih lanjut 😁

and for the last config mari kita buka package.json & tambahkan script berikut:

"scripts": {
  "start": "webpack-dev-server"
}

jadi seharus nya package.json nya keliatan kayak gini

Ok sudah siap tempur sama react nya kalau gini 🚀

Pertama mari kita bikin index.html dulu di dalam folder dist, karena apalah arti javascript di browser tanpa html 😁

src dari tag script diatas adalah ./main.js karena entah kenapa seperti yang saya kasih tahu diatas, hasil default output webpack di tempat saya ada disitu padahal kata document nama file nya bakal bundle.js tapi ya sudahlah, mungkin biar aman bisa di tulis sendiri output path nya…

Lanjut bikin index.js di folder src yang berisi sebagai berikut:

Jadi cerita nya saya udah punya file css ni yang udah ada code untuk styling nya, nah berikut link ke raw file css di github: cssmagic. Image avatar saya ambil dari link yang tertera diatas.

Ehh tapi tahu kan coding inu ngapain? Tahulah… orang cuma nampilin text sama gambar doank 😄 Ok mari kita coba run script yang sudah kita sisipkan di package.json. yarn start 🚀🚀🚀

React Rocks….!!!

FYI untuk build ke production silahkan sisipkan script lagi di package.json nya menjadi seperti berikut:

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack -p"
}

Dengan scirpt build diatas kita bisa memulai webpack -p yang sebenarnya shortcut dari script berikut:

--optimize-minimize --define process.env.NODE_ENV="production"

Seperti yang tertulis di script tersebut env nya sudah di rubah ke versi production so buat simple project kayak gini saya kira optimasi ini udah cukup karena webpack sendiri lah yang akan mengurus optimasi code nya nanti.

After build silahkan check di folder dist, seharusnya ada file lagi di dalamnya selain index.html yaitu satu file js hasil build & satu image file yang namanya sudah pake MD5 hash, nah… silahkan coba open html di browser tanpa server. Seharus nya tampilan web tetap seperti screenshot diatas sewaktu kita running server 😏

Berikut link github project ini apabila ada yang mungkin typo jadi react nya ga jalan atau sebagainya.

Sekian & terima kasih.