Skip to main content

Konsep konfigurasi webpack

Webpack memiliki beberapa properti didalam file webpack.config.js diantara lain. entry,output, mode dan plugin.

Entry​

entry merupakan titik point atau entrypoint dari webpacknya. Dimana file induk yang akan dilakukan proses bundle harus dimasukan pada entry point ini. Secara umum file entry point terletak difolder ./src/index.js tetapi tidak melulu di folder src. entry point ini bisa dinavigasiya ke folder apa saja. misal diroot folder ataupun di folder ./app

webpack.config.js
module.export = {
  entry: "./src/index.js",
};

Output​

Property ouput digunakan untuk menentukan folder hasil bundle diletakan. secara default webpack akan menempatkan hasil build pada folder ./dist. tetapi misal ingin meletakan difolder ./wisnu juga tidak masalah.

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

module.export = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "output-result-build.bundle.js",
  },
};
tip

Ada beberapa property output didalamnya yang bisa diexplore lagi

Module​

Sejatinya webpack hanya mengerti input ouput berupa sintak javascipt dan JSON. Dengan begitu sintak css ataupun html tidak bisa dilakukan minify ataupun compile. Dengan adanya module atau loader ini maka webpack semakin powerfull untuk malakukan tugas tugas lain pada file selain javascript dan JSON.

Secara struktu loader di module ini terdapat dua properti yaitu

  • test = untuk mengidentifikasi file apa saja yang akan dilakukan oleh loader
  • use = loader apa yang akan dijalanka oleh webpack untuk menangani file pada property use
webpack.config.js
const path = require("path");

module.export = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "output-result-build.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: "nama-loader",
        exclude: "node_modules",
      },
    ],
  },
};
Gambaran umum loader

Si webpack.config.js akan memerintahkan ke webpack. Hey webpack, misal kamu nanti bertemu file dengan extensi .txt maka lakukan loader dulu ya, baru setelah dimasak oleh loader baru nanti berikan hasil masakanmu tadi ke bundle.js