Berkenalan Dengan Webpack

Webpack?

webpack is a module bundler for modern JavaScript applications

webpack adalah module bundler untuk aplikasi javascript modern. webpack membantu kita dalam mengelolah file javascript dengan segala modul yang ada di dalamnya, dan kemudian pada prosesnya file-file javascript tersebut akan di paketkan ke dalam sebuah file dengan ukuran yang lebih kecil.

Okey, biar gak bingung gambarannya seperti ini.

http://www.pro-react.com/materials/appendixA/images/picture2.png

Biar lebih mudah di pahami kita akan coba praktekan secara langsung, sebelumnya install dulu nodejs dan npm kemudian install webpack secara global dengan perintah npm install -g webpack .

Jika berhasil maka ketika memasukan perintah webpack --version maka keluaran yang akan tampil pada terminal kalian seperti gambar dibawah ini.

Okey, selanjutnya buat sebuah file baru dengan nama learn-webpack kemudian pergi ke direktori tersebut, lalu ketikan perintah npm init -y .

Jika berhasil maka akan ada file baru yang di tambahkan di direktori aplikasi kita dengan nama package.json dan isinya seperti yang tampil di bawah ini.

Selanjutnya install webpack dengan perintah npm install webpack —-save-devperintah tersebut akan menginstall webpack ke “devDependencies” artinya plugin webpack terdafar di development enviroment .

Okey, jika berhasil buat dua folder baru dengan nama dist dan src yang nantinya di dalam direktori folder dist kita akan menyimpan file hasil build dan kemudian source javascript akan kita simpan di folder src . strukturnya seperti ini.

.
|
|-- node_modules
|
|-- package.json
|
|-- src
|
|__ dist

Langkah selanjutnya pada folder src buat file baru dengan nama app.js dan pada root direktori buat file webpack.config.js strukturnya akan menjadi seperti ini.

.
|
|-- node_modules
|
|-- package.json
|
|-- src
|    |__ app.js 
|
|-- dist
|
|__ webpack.config.js

Buka file app.js lalu masukan console.log('Hello Webpack') lalu buka terminal dan ketik perintah webpack maka yang akan tampil seperti ini.

Whoops error, perintah tersebut error karna kita belum membuat configurasi webpack di file webpack.config.js .

// webpack.config.js
const path = require('path')
const config = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/'),
  },
}
module.exports = config

sekarang jalankan lagi perintah webpack di terminal.

Yap.. berhasil.

Kesimpulan

Untuk saat ini kita telah belajar setup aplikasi javascript menggunakan webpack, kedepannya ketika berhadapan dengan project skala besar kita membutuhkan banyak package npm yang akan di install di direktori project kita, misal untuk konfigurasi es6, react, vuejs dan lain sebagainya.