Bundle Website Statik Dengan Webpack

July 8, 2022

Intro dan Persiapan

Mari kita nge-bundling website statik dengan webpack, untuk meminimalkan jumlah HTTP request dan meningkatkan kinerja website. Tujuannya cukup jelas dan mudah, untuk bisa melakukan ini:

<html>
    <head>
        ...
    </head>

    <body>
        ...
        <script src="./dist/bundle.js"></script>
    </body>
</html>

dan bukan ini:

<html>
    <head>
        <link rel="stylesheet" href="./assets/main.css">
    </head>

    <body>
        ...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="./assets/main.js"></script>
    </body>
</html>

Kita mulai dengan projek sederhana seperti berikut ini:

project
|__ index.html
|__ assets
    |__ main.css
    |__ main.js

Isi dari file-file tersebut bisa dilihat disini. Project ini membutuhkan jQuery sebagai library external, dan pada akhirnya struktur projek akan jadi seperti ini:

project
|__ index.html
|__ assets
|   |__ main.css
|   |__ main.js
|__dist
|   |__ bundle.js
|__ node_modules
|   |__ *modules-for-development*
|__ app.js
|__ package.json
|__ package-lock.json
|__ webpack.config.js

AKAN TETAPI, kita hanya akan membutuhkan index.html dan dist/bundle.js sebagai hasil akhir dari website statik.

Langkah-langkah

Masuk ke folder projek
Install webpack dan jQuery
```
npm i -D webpack webpack-cli jquery
```
Install style-loader dan css-loader untuk menangani CSS
```
npm i -D style-loader css-loader
```

Buat file webpack.config.js

// webpack.config.js
const webpack = require('webpack')

module.exports = {
    entry: './app.js', // the entry point, see step #4
    mode: 'production',
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', // inject CSS to page
                    'css-loader', // translates CSS into CommonJS modules
                ],
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery", // to make sure jquery is globally accessable
            jQuery: "jquery",
        })
    ]
};

Buat app.js sebagai entry point untuk mem-bundle website. Ingat ya, urutannya penting. Karena main.js butuh jQuery, jadi jQuery harus duluan.
```
// app.js
require('./assets/main.css')
window.$ = require('jquery');
require('./assets/main.js')
```

Tambahkan build script ke package.json

// package.json
{
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "css-loader": "^6.7.1",
        "jquery": "^3.6.0",
        "style-loader": "^3.3.1",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0"
    }
}

Build the project
```
npm run build
```
Kalau semuanya lancar, webpack akan mem-bundle assets/main.css, assets/main.js, dan jQuery menjadi 1 file yang namanya bundle.js. File ini bisa ditemukan di folder dist.
Perbarui index.html dengan cara menghapus referensi-referensi ke assets/main.css, assets/main.js dan jQuery, lalu tambahkan referensi ke dist/bundle.js
SELESAI. Sekarang kita hanya butuh index.html dan dist/bundle.js untuk diunggah ke web hosting, sedangkan projek yang ada bisa disimpan untuk proses development.

Git: https://github.com/TheMaggieSimpson/bundle-staticweb-webpack/tree/master/css-js-jquery

References: