Memahami Webpack tidak sesulit memahami Wanita (Part III)

Mengenal devtool dan source-map

Pada artikel kedua, kita sudah berhasil menggunakan live-reload. Dan skrg kita akan mengenal lebih dalam tentang devtool. Sebelum mengenal tipe-tipe devtool yang ada di dalam webpack mari kira kenali terlebih dahulu apa itu source-map.

Dengan mengaktifkan source-map kita dapat melihat lebih jelas dimana terjadi error di dalam koding kita.

Sourcemap sangat membantu kita dalam debugging, dengan sourcemap kita dapat melihat dengan lebih jelas dimana terdapat error di dalam koding kita. Bagusnya lagi, sourcemap gak cuma bisa digunakan di koding, tapi bisa juga di styling. Ok, sekarang udah ngerti manfaat sourcemap. Bagaimana cara mengaktifkan fitur ini pada webpack?

Mengaktifkan sourcemap

Dalam mode development, kita bisa gunakaan eval-source-map dan untuk production kita gunakan source-map. Kita akan lanjutkan konfigurasi webpack dari artikel-artikel sebelumnya, buka file webpack.config.js dan tambahkan devtool seperti contoh dibawah ini:

webpack.config.js

...
switch(process.env.npm_lifecycle_event) {
 case 'build':
  config = merge(
      common,
      {
        devtool: 'source-map'
      },
      parts.cssLoader()
    );
  break;
 default:
  config = merge(
      common,
      {
        devtool: 'eval-source-map'
      },
      parts.cssLoader(),
      parts.devServer({
        host: process.env.HOST,
        port: process.env.PORT
      })
    );
}
...

Coba jalankan ulang webpack dev servernya dan refresh halaman, pada chrome dev tool (Jika menggunakan chrome) bisa dilihat pada tab source.(lihat gambar diatas 🙄)

Wow, keren bingit 😍

Tapi apa cuma ada eval-source-map & source-map saja? Tentu tidak, berdasarkan dokumentasi webpack. Ada banyak devtool dan mempunyai karakter build yang berbeda. Apa saja perbedaannya? Berdasarkan dokumentasi webpack, yang menjadi parameter pembeda tiap konfigurasi devtool yaitu:

• kecepatan build
• kecepatan rebuild
• support production
• kualitas kode yang di-generate

Jadi sekarang apa saja devtool yang tersedia? Teman-teman bisa klik gambar di bawah ini supaya lebih jelas. Gambar diambil dari dokumentasi webpack.

Tabel perbandingan konfigurasi devtool.

Sourcemap pada styling

Ok, itu tadi untuk file js, sekarang untuk css. Bagaimana cara mengaktifkan fitur sourcemap pada css? Caranya adalah dengan menggunakan query parameter sourceMap pada loader.

['style', 'css?module&sourceMap']

Coba inspect element kita sebelum menggunakan sourcemap pada style,

Tanpa sourcemap 😟

Dan yang dibawah ini setelah menggunakan sourcemap 🤓

Menggunakan sourcemap

Kesimpulan

Jadi sekarang kita sudah mengerti bagaimana tugas dan tanggung jawab sourcemap dalam membantu kita debugging. Kita akan lanjutkan lagi konfigurasi webpack yang lebih memuaskan pada artikel berikutnya.

Source code dapat dilihat disini, (pada branch source-map)

😍

Jika artikel ini bermanfaat jangan lupa di-share dan klik heart icon-nya.

Artikel Lainnya

Artikel ini merupakan bagian dari Memahami Webpack tidak sesulit memahami Wanita the Series.

• Konfigurasi Dasar Webpack
• Memisahkan Konfigurasi Webpack, Integrasi Live Reload dan Loader CSS pada Webpack
• Mengenal devtool (dan source-map). (Anda sedang disini)
• Minifying, Splitting, Cleaning, Separating CSS Webpack Build
• Konfigurasi ReactJS (ongoing)

Memahami Webpack tidak sesulit memahami Wanita the Series