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

Ep 2: Cover some basic config to load static assets (scss, img, font, etc).

Langsung saja setelah beberapa minggu libur buat nulis, sekarang saya lanjut lagi membahas webpack nya. :)

Untuk styling di react kita bisa menggunakan beberapa cara, mungkin yang sekarang jadi trending yaitu menuliskan style di dalam file javascript menggunakan library seperti styled-components atau menuliskan css tanpa harus pusing memikirkan naming-convention yang disebabkan oleh global names menggunakan css-modules, dimana kita bisa membungkus sebuah style ke dalam suatu variable untuk menjauhi penggunaan nama class yang sama. Tapi apabila kita ingin menggunakan file preprocessor (scss, stylus, less, dkk) seperti biasa, yang nantinya akan di bundle & compile dalam satu file css, kita pun masih bisa menggunakan webpack untuk melakukan tugas ini. Oh ya pada contoh ini saya akan menggunakan scss preprocessor. Let’s see how it works…

Hal pertama yang perlu diketahui adalah webpack hanya mengerti javascript dan semua file yang akan di handle oleh webpack nanti nya akan di convert ke javascript dulu. Wow kok bisa gtu? mungkin bisa dilihat video dibawah ini untuk bisa lebih mengerti webpack, agak panjang kalau dijelasin soalnya. :D

Yap setelah selesai nonton, mari ambil terminalnya & install some loaders so webpack can understand how to handle any other files than javascript.

yarn add style-loader css-loader postcss-loader sass-loader -D

Beberapa dari kalian mungkin akan menemukan error: Cannot find module ‘node-sass’. Cukup install dependency node-sass untuk menyelesaikannya. Yap sekian dependency yang akan kita gunakan untuk mengcompile scss ke css.

  1. style-loader: loader ini bertanggung jawab untuk menambahkan CSS ke DOM by injecting a <style> tag or import css with <link> tag.
  2. css-loader: loader ini menginterpretasi @import and url() pada scss menjadi seperti import/require() pada javscript.
  3. postcss-loader: karena kita akan menggunakan autoprefixer untuk memudahkan css kita supaya suppport cross-browser compatibility.
  4. sass-loader: tentu saja untuk menterjemahkan scss ke css.

OK setelah installasi selesai mari kita tambahkan sedikit settingan pada webpack.config.js lagi.

Pada webpack.config.js yang sebelumnya kita hanya menerapkan rule untuk file js saja. Nah pada config di atas kita mulai menerapkan rule untuk scss file, ada 4 loader disana seperti yang sudah disebutkan sesuai kegunaan masing-masing. Nah mari kita pasang sebuah class pada file react kita untuk styling.

Selanjutnya mari kita buat file 3 file scss di dalam folder styles. Dua berisikan style code & yang satu adalah code core scss file, dimana dia bertugas untuk mengatur file scss apa saja yang akan digunakan, and tadaa…

Note: main.scss ini akan sangat membantu scalability project kita. memudahkan untuk add/remove file yang kita perlukan atau tidak.

Wait… Where’s the css file? dilihat di dist folder juga nggak ada. Ok disini kita butuh satu plugin lagi yang berperan untuk melakukan extract file ke css yaitu extract-text-webpack-plugin.

yarn add -D extract-text-webpack-plugin

Balik ke webpack.config.js kita akan mengubah beberapa line untuk menyesuaikannya. Pertama kita harus mengimport plugin tersebut dengan require agar bisa digunakan. Kemudian kita wrap method use dari scss dengan ExtractTextPlugin.extract(), terakhir kita define ExtractTextPlugin di dalam method plugins.

Pada episode sebelumnya kita telah mengatur settingan script di package.json so menjalankan ‘npm run build’ pada terminal seharusnya sudah melakukan perintah ‘webpack -p’ yang akan melakukan production build sehingga file css akan teroutput di dalam dist folder. Jangan lupa edit index.html untuk melakukan link pada file css kita yang telah tercompile. See ya…

Github:
https://github.com/singgihnn/Simple-Webpack-2-Config-for-React/blob/episode2/README.md

Show your support

Clapping shows how much you appreciated SinggiH’s story.