Cara Setup webpack.

Webpack adalah module bundler: alat yang menggabungkan banyak file JavaScript, CSS, dan aset lain menjadi beberapa file akhir yang efisien untuk dimuat browser.

Instalasi Dasar

npm install --save-dev webpack webpack-cli

Struktur Konfigurasi Minimal

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: "production",
};

entry menentukan file mana yang menjadi titik awal, sementara output menentukan nama dan lokasi file hasil bundling.

Menjalankan Webpack

npx webpack

Untuk kenyamanan saat development, tambahkan script di package.json:

{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch"
  }
}

Loader: Memproses File Selain JavaScript

Webpack secara default hanya memahami JavaScript. Untuk memproses CSS, gambar, atau file lain, dibutuhkan loader.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

Dengan konfigurasi ini, file CSS bisa langsung diimpor dari JavaScript:

import "./gaya.css";

Plugin: Memperluas Kemampuan Webpack

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

Plugin bekerja di level yang lebih luas dibanding loader, misalnya menghasilkan file HTML otomatis yang sudah menautkan bundle JavaScript hasil build.

Development Server

npm install --save-dev webpack-dev-server

module.exports = {
  // ...
  devServer: {
    static: "./dist",
    hot: true,
    port: 3000,
  },
};

webpack-dev-server menjalankan server lokal dengan hot reload, sehingga perubahan kode langsung terlihat di browser tanpa perlu build manual berulang kali.

Webpack di Tengah Ekosistem Modern

Perlu dicatat, banyak proyek baru saat ini beralih ke bundler yang lebih cepat seperti Vite untuk kebutuhan development sehari-hari, sementara webpack tetap banyak dipakai di proyek besar dan lawas karena ekosistem plugin-nya yang sangat matang.

Kesimpulan

Konfigurasi inti webpack berputar di sekitar entry, output, loader untuk memproses berbagai jenis file, dan plugin untuk kemampuan tambahan seperti pembuatan HTML otomatis. Meski setup awalnya terasa rumit, memahami empat bagian ini sudah cukup untuk membaca dan menyesuaikan konfigurasi webpack di kebanyakan proyek.