Webpack

Webpack adalah sebuah module bundler untuk aplikasi JavaScript modern. Ketika webpack memproses aplikasi, ia secara rekursif akan membangun sebuah dependency graph yang mencakup setiap modul aplikasi yang dibutuhkan, kemudian menggabungkan semuanya menjadi satu atau lebih bundle.

Webpack akan dibutuhkan ketika kamu bekerja dengan menggunakan module NPM. Module NPM tidak bisa di-resolve oleh browser, sehingga perlu di-bundle terlebih dahulu.

Instalasi

npm install -D webpack webpack-cli

Konfigurasi (Optional)

touch webpack.config.js

const path = require("path");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "main.js",
    path: path.join(__dirname, "dist"),
  },
};

Menjalankan Webpack

Jalankan perintah Webpack npx webpack ./dirname/filename.js. Contoh:

npx webpack ./src/main.js

Maka file pada main.js akan distribute/di-bundling ke direktori dist. Di sana akan ditulis ulang, agar dapat dibaca oleh browser. Jangan lupa rubah pada script source main.js menjadi ../dist/main.js di file src/index.html.

<script src="../dist/main.js"></script>

Menjalankan Webpack dengan mode watch

Jalankan perintah Webpack dengan mode watch npx webpack ./filename.js --watch. Contoh:

npx webpack ./src/main.js --watch

Mode watch ini ketika kamu melakukan perubahan, maka di browser juga otomatis melakukan perubahan secara langsung.

Kamu juga dapat mempersingkatnya dengan membuat scripts pada file package.json.

"scripts": {
    "wp:run": "npx webpack ./src/main.js --watch",
    "wp:build": "npx webpack ./src/main.js"
},

Kemudian jalankan di terminal:

npm run wp:run # menjalankan dengan mode watch
npm run wp:build # menjalankan build

Menjalankan Webpack dengan mode development

npx webpack --mode development

Menjalankan Webpack dengan mode production

npx webpack --mode production

Menjalankan Webpack dengan mode development dan watch

npx webpack --mode development --watch