Simple Webpack 2 Config for Your React Project (Episode 1)

Move here: https://medium.com/@singgih_nn/simple-webpack-4-config-untuk-simple-react-project-a642b1f112b1

Ep 1: Cover the basic of webpack config to compile react project with es6.

Saat awal mula belajar react.js hal yang ingin kita pelajari terlebih dahulu tentu saja react.js itu sendiri, namun untuk membangun web dengan technology react ternyata tidak semudah membangun web dengan html, kita perlu sedikit mengulik technology javascript lainya yaitu webpack.

Beberapa orang mungkin telah mengetahui apa kegunaan webpack, sebagian lainya juga mungkin tidak mau ambil pusing soal config webpack karena facebook sendiri telah menyediakan tools untuk menjalankan react.js tanpa harus menguasai webpack terlebih dahulu yaitu create-react-app. Tapi untuk saya sendiri yang pada dasarnya memang suka ngulik & gregetan apabila ada hal yang kurang sesuai, saya lebih suka membuat config sendiri yang simple, bisa saya pahami & sesuai dengan kebutuhan saya.

NB: Sedikit tips mungkin bagi yang belum tahu kenapa create-react-app bisa menjalankan react.js silahakan type command npm run eject di cli root project create-react-app nya & Tadaaa…. you‘ll get a bunch of dependencies & a hell of confusing webpack config

Dikarenakan ketidak efisiennya create-react-app ketika wujud aslinya telah di summon, maka dari itu saya sendiri lebih suka untuk meluangkan waktu belajar webpack.

Ok saya asumsikan kita sudah punya node.js disini. FYI node.js yang saya pakai sudah versi 6 & npm saya versi 4. OK bikin folder namain apa aja sesukanya, lalu masuk ke folder tersebut dengan terminal & run command:

npm install -g yarn

Apa itu yarn? silahkan baca disini: yarnpkg.com
Kenapa pake yarn? silahkan juga cari keunggulanya sendiri, xixixi. Well it is just personal matter what do you want to use. For me yarn it’s faster and can manage dependency more stable for me. Setalah yarn terinstall silahkan run command:

yarn init

Command tersebut berfungsi untuk membuat file package.json dimana file ini berisi tentang meta data project kita. Tinggal enter-enter aja kalau masih belum paham ga bakalan error juga xD

Setelah yarn init selesai mari kita install satu-satu dependecy kita butuhkan. Karena kita pengen belajar react + webpack mari kita install kedua nya…

yarn add react react-dom -S
yarn add webpack webpack-dev-server babel-core babel-loader -D
yarn add babel-preset-es2015 babel-preset-react -D

Hwaaa… banyak ya dependency nya padahal cuma baru mau run react.js dengan es6, yap karena setiap dependency cuma ngejalin satu perintah aja yang dikenal dengan SRP(Single Responsibility Principle). Mari kita ulik satu-satu apa saja dependency yang kita gunakan.

Dimulai dari baris pertama:
1. react & react-dom ga usah dijelaskan ya… ^^v

Baris kedua:
1. webpack: of course ini buat ngebundle file-file react.js nya jadi satu bundle file js, tapi nanti bisa juga ngebundle file-file lainya. Webpack it’s more powerful than what you think.
2. webpack-dev-server: menjalankan server & reload otomatis ketika save.
3. babel-core: core dari babel package itu sendiri yang berisi node.js API.
4. babel-loader: transpiling code javascript pake babel, karena babel tidak hanya digunakan untuk webpack saja makanya perlu ada yang ngenalin.

Baris ketiga:
1. babel-preset-es2015: kumpulan beberapa package es6 untuk compile ke es5 (note: kenapa kumpulan? katanya SRP? sebenarnya ada package-package nya sendiri tapi jumlah nya ada puluhan. Ga mau kan nginstallin satu-satu kalau sebanyak itu, makanya si babel nyediain preset package).
2. babel-preset-react: ini juga kumpulan beberapa package untuk compile react ke javascript.

Setelah installasi selesai mari kita beranjak ke text editor & write some codes… Firstly create a file and name it ‘webpack.config.js’.

Let’s take a look into our codes:
1. entry: path ke file inti dimana file tersebut berisi react file yang mengimport component inti untuk di render ke html.
2. output.path: location path dari file output hasil bundling webpack, dimana semua hasil output dari webpack akan di simpan di path tersebut, karena nanti nya tidak hanya file js saja yang akan diolah oleh webpack.
3. output.filename: nama dari file output hasil bundling webpack.
4. devServer.contentBase: path yang akan dijadikan acuan ketika menjalankan server. 
5. devServer.compress: enable gzip compression.
6. devServer.port: port server. Default nya 8080, berhubung saya menggunakan port itu untuk project lain jadi saya alihkan ke 8000.
7. module.rules: array of rules nya.
8. module.rules.test: file extension yang akan di solve oleh RegExp.
9. module.rules.exclude: list folder yang akan di exclude.
10. module.rules.loader: loader yang digunakan untuk mengompile file yang cocok dengan kondisi dari module.rules.test

Ok sekian penjelasan yang bisa saya berikan apabila kurang jelas bisa bertanya di comment atau langsung browsing document nya webpack.

Time to write some react codes. Seperti config yang sudah kita buat (lihat screenshoot nya lagi) webpack akan melihat file ‘./src/main.js’ so let’s create a folder with name ‘src’ dilanjutkan dengan create file dengan nama ‘main.js’ didalam nya.

File ‘main.js’ ini yang nantinya akan menjadi inti dari file react kita, apabila kita membutuhkan component lain, maka component itu harus di import ke dalam ‘main.js’ dulu, kecuali component tersebut telah di import ke dalam component yang sudah ter import di ‘main.js’. Untuk mengerti konsep import mari kita buat satu folder bernama ‘components’ didalam folder ‘src’ dilanjutkan dengan create file dengan nama ‘List.js’.

Ok satu lagi folder yang perlu kita buat yaitu folder ‘dist’ dimana semua file yang telah di proses oleh webpack akan ter output disini. Setelah folder dist siap kita buat file html didalamnya dimana file hasil compiling webpack akan di include.

Buat file html sederhana dengan satu div yang memiliki id ‘root’ dimana component react nanti akan di inject di dalam div tersebut. Kemudian jangan lupa untuk memberikan script tag dengan src ‘main.js’ karena nanti file bundle javscript hasil dari webpack akan ditaruh di folder ini.

Sedikit lagi untuk sampai ke tahap compiling… let’s take a look at package.json file. Karena kita menggunakan babel untuk compile code es6 ke es5 sebenarnya kita membutuhkan file bernama .babelrc didalam folder root kita untuk mendefine preset yang dibutuhkan, atau kita bisa define babel preset nya didalam file webpack.config.js, tapi ternyata preset ini juga bisa kita define di package.json kita dengan menambahkan option “babel” dan menuliskan preset nya seperti screenshot dibawah ini.

Option “scripts” diatas kita sediakan untuk menjalankan webpack for production build ataupun webpack for development dengan menggunakan webpack-dev-server. Ok let’s open the terminal again inide your root project & type ‘npm start’ inside your terminal, Tadaaa…

React Project kita sudah run di server localhost:8000.

Di episode 2 yang akan datang kita akan melanjutkan webpack.config.js kita agar si webpack bisa mengcompile sass into css with autoprefixer + handle file img or font. See ya…

Github:
https://github.com/singgihnn/Simple-Webpack-2-Config-for-React/tree/episode1

Like what you read? Give SinggiH a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.