Webpack merupakan sebuah tool yang berfungsi sebagai module bundler untuk mem-pack semua resource yang diperlukan oleh sebuah website.
Jika tanpa webpack kita harus menginputkan semua module file baik itu js atau css satu persatu dengan webpack hal tersebut sudah tidak perlu dilakukan lagi, cukup menginputkan satu file js atau css maka semua sudah terselesaikan.
Tidak hanya itu webpack juga berfungsi untuk mengubah ES6 menjadi format ES5 sehingga bisa dibaca oleh browser pada umunya, selain itu bisa mengubah preprocessor CSS seperti SASS, LESS, Stylus, dan sejenisnya menjadi sebuah file CSS yang bisa dibaca di browser.
Oke langsung saja kita mulai prakteknya, sebelumnya pastikan device sudah terinstall npm, jika sudah bisa lanjutkan ke bawah,
Pertama, install webpack dengan cara berikut,
$ mkdir webpack-tutorial
$ cd webpack-tutorial
$ npm init -y
$ npm install webpack
Selanjutnya, buat folder baru dengan nama "js" sehingga akan tampak struktur file seperti pada gambar dibawah,
Tambahkan script untuk menjalankan webpack dengan mengedit file package.json menjadi seperti ini,
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "basic webpack tutorial",
"main": "index.html",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "codedoct.com",
"license": "ISC",
"dependencies": {
"webpack": "^4.16.5"
},
"devDependencies": {
"webpack-cli": "^3.1.0"
}
}
Setelah itu install kembali npm dengan mengetikan sintax "npm install" pada path project di terminal.
Pada file webpack.config.js isikan code berikut,
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/codedoct.js",
output: {
path: __dirname + "/js",
filename: "codedoct.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Dan pada file index.html isikan code berikut,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Webpack</title>
</head>
<body>
<h1>Hello Codedocters</h1>
<div id="number">0</div>
<button onclick="decreaseNumber()">-</button> || <button onclick="increaseNumber()">+</button>
<script src="js/module1.js"></script>
<script src="js/module2.js"></script>
</body>
</html>
Buat file baru dengan nama module1.js dan module2.js kemudian isikan code berikut,
module1.js
window.increaseNumber = function() {
var element = document.getElementById('number');
var number = element.innerHTML;
number++;
element.innerHTML = number;
}
module2.js
window.decreaseNumber = function() {
var element = document.getElementById('number');
var number = element.innerHTML;
number--;
element.innerHTML = number;
}
Setelah itu buka project pada browser sehingga akan tampak seperti pada gambar dibawah,
Dapat dilihat pada gambar diatas, hasil dari inspektur halaman menunjukan bahwa tanpa webpack kita harus menginputkan file js satu persatu.
Selanjutnya kita akan mengaplikasikan webpack pada project tersebut,
Pertama, pada folder "js" buat file dengan nama codedoct.js dan import kedua file module1.js dan module2.js dengan code berikut,
import './module1.js';
import './module2.js';
Setelah itu jalankan webpack dengan cara, buka terminal masuk ke path project dan ketikan "npm run dev" untuk membuild dengan mode development atau "npm run build" untuk membuild dengan mode production, bedanya pada mode production file codedoct.min.js akan di compress menjadi 1 line saja.
Hasil webpack akan tampak seperti gambar dibawah ini,
Dan secara otomatis webpack akan membuat file baru dengan nama codedoct.min.js pada folder "js", sehingga struktur file akan terlihat seperti ini,
Terakhir masukan file codedoct.min.js tadi pada file index.html dengan mengubah file index.html menjadi seperti ini,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Webpack</title>
</head>
<body>
<h1>Hello Codedocters</h1>
<div id="number">0</div>
<button onclick="decreaseNumber()">-</button> || <button onclick="increaseNumber()">+</button>
<script src="js/codedoct.min.js"></script>
</body>
</html>
Coba test kembali pada browser maka akan tampak seperti pada gambar dibawah ini,
Dapat dilihat tampilan akan bekerja sebagaimana mestinya yang menandakan hasil webpack berjalan dengan baik, coba lihat pada inspektur halaman hanya terdapat satu file js yaitu codedoct.min.js dan website berjalan dengan baik, lakukan hal yang sama juga untuk file css.
Selamat mencoba
===DONE!===
