Multi-Page Application dengan Webpack 5

Handri Hermawan
2 min readNov 16, 2022

--

Webpack 5
https://miro.medium.com/max/720/1*umG2CtquHzyLGFK7aIx2AQ.png

Pada sebuah project saya pernah menemukan kasus dimana saya harus memisahkan beberapa file css dan js untuk di gunakan di banyak halaman. Sedangkan hasil output nya di tempatkan di folder yang berbeda dari file utama (ex: app.css, app.js). Untuk folder output dari style saya tempatkan di folder ./pages/ sehingga akan mendapatkan struktur berikut ./pages/homepage.css, ./pages/about.css, dll.

Langsung saja sebelum kita mulai, install terlebih dahulu plugin yang di butuhkan seperti berikut

Webpack

Sekarang kita perlu menginstal Webpack untuk kebutuhan dasarnya. Versi webpack yang di gunakan adalah versi 5.

npm install webpack webpack-cli --save-dev

Dotenv

Nantinya kita akan menggunakan .env untuk setup mode build nya production atau development

npm install dotenv --save-dev

MiniCssExtractPlugin

Plugin ini mengekstrak CSS ke dalam file terpisah. Itu membuat file CSS per file JS yang berisi CSS. Mendukung On-Demand-Loading CSS dan SourceMaps.

npm install mini-css-extract-plugin --save-dev

TerserWebpackPlugin

Seperti css yang perlu di ekstrak dan di minimize file js juga perlu di lakukan agar ukurannya lebih kecil.

npm install terser-webpack-plugin --save-dev

Selain plugin di atas kita perlu juga menambahkan plugin berikut, karena kita akan menggunakan Bootstrap & jQuery. Selain itu juga kita menggunakan SCSS untuk compiler styling nya.

npm install sass-loader style-loader css-loader node-sass post-css babel-loader babel-core jquery url-loader bootstrap svg-url-loader lqip-loader img-loader --save-dev

Setelah semuanya berhasil di install kita buat satu file dengan nama webpack.config.jsdan copy code berikut

NPM scripts

Tambahkan beberapa skrip ke package.json untuk menyederhanakan proses build:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/webpack/bin/webpack.js --node-env=production --progress",
"watch": "node_modules/webpack/bin/webpack.js --node-env=development --watch --progress"
}

Jika semua proses sudah di lakukan dan berhasil maka kita akan mendapatkan file css dan js di dalam folder yang sudah kita tentukan sebelumnya.

Cukup sampai disini sedikit sharing pengalaman tentang penggunaan multi entry pada webpack. Jika ada masukan atau cara yang lebih baik lagi bisa share di komentar.

Thanks for reading and have a nice day!

--

--

Handri Hermawan
Handri Hermawan

Written by Handri Hermawan

Website Performance | Design System | Frontend Developer

No responses yet