Apa itu webpack?

webpack adalah static module bundler untuk apalikasi javascript modern

Javascript modern membutuhkan beberapa konfigurasi untuk bisa di dukung oleh browser, misalnya babel sebagai javascript compiler untuk mengkompilasi javascript modern ke versi yang di dukung oleh browser. Dalam prosesnya webpack akan membundel beberapa module yang saling berkaitan dan akan di generate menjadi satu file atau lebih.

Berikut adalah beberapa konsep utama dari webpack, yang perlu untuk kita pahami:

• Entry
• Output
• Loaders
• Plugins
• Mode

Entry

Entry adalah sebuah entry point atau titik masuk yang menyatakan sebuah direktori atau file yang akan di gunakan untuk di proses lebih lanjut oleh webpack, dengan menggunakan entry kita akan meminta webpack memproses file yang kita definisikan di dalamnya.

Berikut adalah contoh penggunaan entry:

1
2
3
module.exports = {
  entry: './src/index.js',
}

Contoh konfigurasi di atas saya akan meminta webpack untuk memproses file yang berada di direktori ./src/index.js untuk di proses lebih lanjut.

Untuk lebih detail memahami tentang entry silahkan cek disini

Output

Output mendifinisikan akhir dari proses kompilasi webpack, dengan menggunakan output kita bisa memodifikasi file dan direktori yang akan menjadi keluarannya.

Berikut adalah contoh penggunaan output:

1
2
3
4
5
module.exports = {
  output: {
    filename: 'bundle.js',
  }
}

Loaders

Loaders adalah konfigurasi untuk mengatur pola apa yang akan kita pakai sebagai aturan yang akan di terapkan oleh webpack dalam memproses file javascript.

Berikut adalah contoh penggunaan loaders:

1
2
3
4
5
6
7
8
9
10
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
    ],
  },
}

Dengan contoh konfigurasi di atas, kita meminta webpack untuk memproses file dengan extensi .js (file javascript) untuk di proses menggunakan module babel-loader.

Plugins

Plugins adalah konfigurasi tambahan untuk manajemen assets dan setup environment di webpack, misalnya kita ingin menambahkan file dengan extensi .html yang akan di proses secara bersamaan saat webpack mengkompilasi file javascript.

Berikut adalah contoh penggunaan plugins:

1
2
3
4
5
6
7
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HTMLWebpackPlugin()
  ]
}

Contoh di atas adalah menggunakan library tambahan seperti html-webpack-plugin. yang secara otomatis akan membuat sebuah file index.html sebagai assets tambahan.

Mode

Sejak versi 4.0.0 webpack telah menmbahkan satu konfigurasi baru, yaitu mode. sebagai tambahan untuk menentukan pengaturan konfigurasi berdasarkan mode yang di tentukan.

Berikut adalah contoh penggunaanya:

1
2
3
module.exports = {
  mode: 'development|production',
}

Kesimpulan

Webpack merupakan salah satu module bundler populer yang bisa kita gunakan untuk setup projek javascript, dengan berbagai dependency. untuk lebih lanjut silahkan kunjugi dokumentasi webpack, dan sebelumnya saya juga sudah membuat beberapa video terkait webpack di youtube.