Webpack — apa itu, arsitektur dan prinsip kerja

Apa itu Webpack?

Webpack — adalah bundler modul yang menganalisis dependensi aplikasi dan mengemasnya menjadi file statis untuk browser atau server. Dibuat oleh Tobias Koppers pada tahun 2012, Webpack dengan cepat menjadi standar build berkat konsep semua file adalah modul: JavaScript, CSS, gambar, font, dan bahkan HTML diproses melalui sistem loader terpadu.

Mengapa Webpack menjadi standar industri

Webpack mengusulkan ide yang revolusioner untuk zamannya: loader memungkinkan menghubungkan sumber daya apa pun melalui import atau require. Ini membebaskan pengembang dari kebutuhan menggunakan alat terpisah untuk preprosesor CSS (SCSS), kompiler TypeScript, dan pengoptimal gambar. Pada tahun 2020, lebih dari 80% proyek JavaScript menggunakan Webpack (data npm stat: 2019–2024).

Pesaing — Vite, Parcel dan Turbopack — menawarkan kecepatan pengembangan yang lebih tinggi, tetapi Webpack mempertahankan kepemimpinan di segmen enterprise berkat stabilitas, ekosistem yang matang, dan kompatibilitas mundur. Migrasi dari Webpack ke Vite di proyek besar memakan waktu berminggu-minggu dan sering terhambat oleh ketidakcocokan plugin.

Bagaimana Webpack bekerja

Webpack membangun grafik dependensi, dimulai dari titik masuk. Setiap import atau require yang ditemukan ditambahkan ke grafik, melewati rantai loader dan ditempatkan di chunk. Hasil akhir tergantung pada konfigurasi: satu bundel, beberapa chunk, atau output perpustakaan dalam format UMD, CommonJS atau ES Module.

Proses build Webpack

// Konfigurasi minimal Webpack 5
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5 memperkenalkan cache bawaan berbasis sistem file, yang mempercepat build berulang 2–5 kali. Persistent caching menyimpan hasil transformasi modul antar proses, yang sangat penting dalam CI/CD. Untuk mengaktifkannya, cukup tambahkan cache: { type: 'filesystem' } ke konfigurasi.

Konsep kunci Webpack

Webpack beroperasi dengan empat konsep dasar: Entry (titik masuk), Output (keluaran), Loaders (transformasi) dan Plugins (ekstensi). Memahami konsep-konsep ini diperlukan untuk mengkonfigurasi build apa pun, dari situs sederhana hingga aplikasi enterprise yang kompleks.

Entry, Output dan mode

Entry — array atau objek yang mendefinisikan satu atau beberapa titik masuk. Multi-entry digunakan untuk aplikasi multi-komponen. Output — pengaturan file keluaran: path, template nama, URL publik. Mode — development, production atau none — secara otomatis mengaktifkan plugin optimal dan nilai default untuk setiap mode.

Content Hash — penambahan hash konten ke nama file ([contenthash]) memastikan caching jangka panjang. Browser memuat file baru hanya jika isinya berubah. SplitChunksPlugin secara otomatis mengekstrak dependensi bersama dari entry yang berbeda ke dalam chunk terpisah, mencegah duplikasi kode.

Loaders dan Plugins

Loaders mentransformasi file sumber sebelum ditambahkan ke grafik dependensi. Setiap loader adalah fungsi yang menerima konten file dan mengembalikan modul JavaScript. Plugins — ekstensi yang lebih kuat yang memiliki akses ke seluruh siklus hidup build: dari awal hingga pembuatan file output.

Loader populer dan tujuannya

Plugins, tidak seperti loader, dapat bertindak pada tahap build mana pun. HtmlWebpackPlugin secara otomatis menghasilkan file HTML dengan skrip yang terhubung. MiniCssExtractPlugin mengekstrak CSS ke file terpisah untuk pemuatan paralel. DefinePlugin memungkinkan meneruskan variabel lingkungan ke kode aplikasi selama build.

Optimasi build Webpack

Webpack menyediakan mekanisme optimasi bawaan: tree shaking, code splitting dan kompresi. Tree shaking menghapus ekspor yang tidak digunakan dari modul ES. Code splitting melalui import() membagi bundel menjadi chunk dinamis. Minimizer — TerserPlugin untuk JS dan CssMinimizerPlugin untuk CSS.

Teknik optimasi lanjutan

// webpack.config.js — optimasi build produksi
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation — fitur Webpack 5 yang paling kuat untuk microfrontend. Ini memungkinkan memuat modul dari build independen lain saat runtime. Setiap mikro-aplikasi dikembangkan dan diterapkan secara independen, tetapi bergabung menjadi satu antarmuka untuk pengguna. Segment Analytics telah menggunakan Module Federation dalam produksi sejak 2021, mengurangi waktu penerapan sebesar 80%.

Webpack untuk React Native dan proyek web

Webpack jarang digunakan langsung di React Native — untuk itu ada Metro. Namun, Webpack digunakan dalam proyek React Native Web, ketika satu basis kode dibangun untuk platform seluler (melalui Metro) dan web (melalui Webpack). Webpack juga populer di aplikasi hibrida pada Ionic dan Cordova.

Webpack untuk build lintas platform

Dalam proyek di mana React Native Web digunakan untuk rendering web, Webpack dikonfigurasi dengan alias yang menggantikan modul asli dengan implementasi web. Alias react-native → react-native-web memungkinkan penggunaan komponen bersama tanpa mengubah impor. DefinePlugin meneruskan bendera platform untuk kompilasi bersyarat kode spesifik platform.

Optimasi Webpack untuk web seluler berbeda dari desktop. Build Mobile-first mencakup minifikasi agresif, lazy loading gambar, dan pemuatan prioritas CSS kritis. CompressionPlugin dengan kompresi brotli mengurangi ukuran bundel sebesar 20–25% untuk jaringan seluler 3G/4G. Gunakan webpack-merge untuk memisahkan konfigurasi untuk platform berbeda: build mobile-first dan yang dioptimalkan untuk desktop.

Webpack 5 Module Federation: microfrontend

Module Federation — fitur revolusioner Webpack 5, yang memungkinkan memuat modul JavaScript dari build independen lain tanpa publikasi di npm. Setiap mikro-aplikasi dikembangkan secara independen, memiliki konfigurasi Webpack sendiri, dan diterapkan secara terpisah. Aplikasi Host menghubungkan modul dari build jarak jauh melalui konfigurasi khusus plugin ModuleFederationPlugin.

Penyedia exposes modul yang dipilih, dan host menggunakan remotes untuk menghubungkannya. Module Federation mendukung pustaka bersama: jika React digunakan di dua mikro-aplikasi, Webpack akan memuatnya hanya sekali. Ini memberikan penghematan lalu lintas hingga 60% bagi pengguna. Perusahaan besar, termasuk Segment dan Best Buy, menggunakan Module Federation dalam produksi, mengurangi waktu penerapan dari jam menjadi menit.

Masalah umum dan solusinya

Saat bekerja dengan Module Federation, pengembang sering menghadapi konflik dependensi shared dari versi yang berbeda. Solusinya — tentukan secara eksplisit requiredVersion dan singleton: true untuk pustaka kritis. Masalah lain — kehilangan konteks saat mengimpor komponen dari build jarak jauh, terutama dengan React Context dan Redux. Untuk mengatasinya, gunakan shared: { react: { singleton: true } } untuk memastikan semua mikro-aplikasi menggunakan instance React yang sama. Untuk arsitektur microfrontend besar, disarankan menggunakan Module Federation dengan sistem monorepo (Nx, Turborepo) untuk menyinkronkan versi dependensi bersama dan memastikan konsistensi build.