Webpack apa itu?

Sejenis makanan kah?

INTRO

Pada zaman dahulu kala, para Front-end Fighter kewalahan mengatur berbagai macam modul yang mereka gunakan untuk menyelesaikan tugas mulia mereka. Akan tetapi, semua itu berubah saat salah satu module bundler tiba, Webpack!!!.

WEBPACK??

Webpack (https://webpack.js.org/) merupakan sebuah module bundler JavaScript untuk membungkus module/dependency/library/assets menjadi satu paket file berekstensi JavaScript (.js). Hanya begitu?? Well, nggk juga sih..

Selain sebagai module bundler, dengan berbagai loader dan plugin yang sudah disediakan untuk Webpack, kita bisa gunakan Webpack untuk mengubah ES6 (ECMAScript 2015) menjadi format ES5 (JavaScript yang kita kenal) yang bisa dibaca oleh browser dan bisa mengubah preprocessor CSS kayak SASS, LESS, Stylus, dan saudara-saudaranya menjadi sebuah file CSS yang bisa dibaca di browser. Nggk cuma itu, Webpack juga digunakan saat kita pakai Front-end Framework kayak ReactJS, VueJS, Angular dan sejenisnya.

Cara Webpack Bekerja. Diambil dari https://webpack.js.org/

REQUIREMENT

Kebutuhan minimal untuk menggunakan Webpack adalah tahu dan paham cara pakai terminal/console/command prompt/Bash dan NPM (Node Package Manager). Sisanya keahlian Web Front-End. :v

IMPLEMENTASI

Biar nggk penasaran sama kegunaan Webpack, bagusnya kita langsung praktikin aja.. wkwkwk…

Okeke, pertama kita bikin proyek baru dulu :

$ mkdir my-web-with-webpack
$ cd my-web-with-webpack
$ npm init -y
$ npm install webpack --save-dev

Pastikan struktur direktori dari proyek yang sudah dibuat seperti ini :

- dist/
- src/ 
  - js/ 
    - component.js
  - sass/
    - variable/ 
      - _color.scss
      - _font.scss 
    - main.scss
  - main.js
- package.json
- webpack.config.js

Bila diperhatikan terdapat file webpack.config.js, file ini berfungsi sebagai file konfigurasi untuk Webpack mengganti penggunaan Webpack melalui terminal/console/command prompt/Bash. Dalam proyek ini, kita akan atur Webpack untuk mengubah file-file yang ada di folder src/ ke folder dist/.

SETTING UP THE “SESAJEN”

src/js/component.js

export default function() {
  var el = document.createElement(‘h1’);
  el.innerHTML = ‘Yeay!!!!’;
  return el;
}

src/main.js

import component from './js/component';
document.body.appendChild(component());

Pada implementasi ini kita akan mengubah SASS ke CSS, maka kita butuh modul tambahan, yaitu extract-text-webpack-plugin, css-loader, sass-loader, dan node-sass yang punya fungsi untuk mengubah SASS ke CSS. Tidak lupa pasang juga modul html-webpack-plugin untuk generate file index.html.

$ npm install html-webpack-plugin extract-text-webpack-plugin css-loader sass-loader node-sass --save-dev

src/sass/variable/_color.scss

$color-primary : #1DABB8;
$color-primary-dark : #00B5B5;
$color-accent : #83D6DE;
$color-black : #282830;
$color-gray : #E7E7E7;

src/sass/variable/_font.scss

$font-family : 'Roboto', sans-serif;

src/sass/main.scss

@import 'variable/color';
@import 'variable/font';
html{
  font-family : $font-family;
  color :$color-black;
}

Berikut konfigurasi dari webpack.config.js :

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry : ['./src/main.js','./src/sass/main.scss'],
  output:{
    path : path.resolve(__dirname,'./dist/'),
    filename : 'js/app.bundle.js'
  },
  module : {
    rules : [
      {
        test : /\.(sass|scss)$/,
        loader : ExtractTextPlugin.extract(['css-loader','sass-loader'])
      }
    ]
  },
  plugins : [
    new ExtractTextPlugin({
      filename : 'css/app.bundle.css',
      allChunks :true
    }),
    new HtmlWebpackPlugin({
      title : 'My Web with Webpack'
    })
  ]
}

Kita coba dengan menjalankan perintah berikut :

$ node_modules/.bin/webpack

Berikut hasilnya :

Output di Terminal

Hasil Proses

Sekarang file-file yang sudah berubah akan tersimpan di folder dist/ seperti gambar di samping. Nama file yang tersimpan, seperti app.bundle.css dan app.bundle.js didapat dari hasil konfigurasi yang sudah dibuat di webpack.config.js.

Biar penggunaan Webpack lebih cepet, kita tambahkan perintah Build di package.json, jadi :

...
"scripts": {
  "build": "webpack"
}
...

Sehingga untuk menjalankan webpack cukup dengan perintah :

$ npm run build

KESIMPULAN

Sebetulnya Webpack merupakan salah satu dari sekian banyak module bundler yang sering digunakan dan sudah menjadi “makanan” bagi para Front-end Developer Zaman Now untuk membantu produktivitas mereka :v.

So, stay hungry and stay foolish…. and sorry for everything 😅

REFERENSI

Just type what you want in Google.. you’ll find it.

NOTE

Kalau ada yang perlu dikoreksi kasih tahu ya .. wkwkwk..