{{ message }}

Tutorial Cara Menggunakan Webpack

13/04/2017 | Web Tools
Tutorial Cara Menggunakan Webpack

Webpack adalah tools untuk membundle modul-modul Javascript. Jika Anda mulai serius untuk membangun aplikasi HTML 5 – Javascript hingga skala besar tools ini akan sangat membantu. Anda dapat mengelola source code Javascript Anda yg kompleks, lalu membundlenya menjadi satu kesatuan file yg mudah di include ke dalam file HTML Anda. Dengan menggunakan webpack, maka Anda diperbolehkan melakukan include antara file JS dengan perintah require seperti di NodeJS dan membangun modul JS untuk dapat dipakai reusable keluar lingkup file JS lain dengan perintah module.exports yg juga sama seperti di NodeJS. Lalu setelah source code Anda selesai ditulis maka Anda dapat membundle keseluruhan file JS Anda menjadi sebuah file JS yg dapat dengan mudah diintegrasikan ke dokumen HTML.

Baiklah sekarang kita akan memulai experiment kita, yaitu mencoba menggunakan tools Webpack. Situs resmi webpack terdapat disini https://webpack.github.io. Tapi kita akan menggunakan NPM untuk menginstall webpack secara online, jadi pastikan Anda telah menginstall NodeJS di sistem operasi Anda (untuk Windows) atau Anda dapat menginstall NPM dahulu (untuk Linux). Lalu buka command line/terminal Anda dan ketikan perintah penginstallan webpack seperti berikut;

npm install -g webpack

Setelah selesai maka Anda dapat menggunakan perintah webpack di command line/terminal Anda. Sekarang Anda dapat mencoba sebuah file Javascript untuk di compile dengan webpack. Coba kita membuat file halodunia.js seperti berikut;

document.write('Hallo dunia');

Lalu bukalah command line/terminal Anda dan masuk ke direktori dimana file halodunia.js Anda disimpan. Disitu Anda dapat mengcompilenya dengan perintah webpack seperti berikut;

webpack ./halodunia.js hasil.js

File hasil.js akan terbentuk pada folder yg sama. Kemudian Anda dapat meload file hasil.js tersebut ke file HTML Anda, misal Anda membuat file index.html. Maka seperti biasa Anda dapat meloadnya dengan cara berikut;

...
...
<script src="hasil.js"></script>
...
...

Sesuai perintah Javascript yg kita buat ketika kita mencoba menjalankan index.html menggunakan web browser adalah menampilkan text “Halo Dunia”. Tidak ada yg spesial disini, bahkan jika Anda mengganti src=”hasil.js” menjadi src=”halodunia.js” maka hasilnya akan sama saja. Manfaat dari webpack akan terasa ketika Anda bekerja dengan lebih dari satu file atau banyak file JS. Baiklah berikutnya kita mencoba bekerja dengan lebih dari satu file. Silakan modifikasi file halodunia.js menjadi seperti berikut;

module.exports = {
    tulis: function () {
        document.write('Halo Dunia dari modul yg berbeda');
    },
};

Lalu buatlah file main.js dengan isi seperti berikut;

var halodunia = require('./halodunia.js');
halodunia.tulis();

Dapat Anda lihat diatas bahwa file main.js akan meload file halodunia.js untuk dapat digunakan secara reusable. Lalu biarkan webpack mengurusnya, dengan menyatukan kedua buah file tersebut menjadi sebuah file JS berdasar perintah require yg kita tulis di main.js. Berikutnya buka command line/terminal Anda dan ketik perintah berikut;

webpack ./main.js hasil.js

Silakan buka index.html lagi untuk menjalankan program JSnya. Seperti itulah kira-kira cara menggunakan webpack, jika Anda mengerti maksud penjabaran tutorial ini maka Anda akan menyadari bahwa tools webpack ini sangat berguna untuk mengelola program Javascript Anda hingga skala besar.