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.
Oke 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 .
Selanjutnya jika berhasil maka ketika memasukan perintah webpack --version
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
Selanjutnya install webpack dengan perintah npm install webpack —-save-devperintah tersebut akan menginstall webpack ke “devDependencies” artinya plugin webpack terdafar di development enviroment .
Selanjutnya jika sudah 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 yaitu 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
Oke selanjutnya buka file app.js lalu masukan console.log('Hello Webpack') lalu buka terminal dan ketik perintah webpack
Agar perintah tersebut tidak akan eror maka kita harus membuat configurasi webpack di file webpack.config.js .
// webpack.config.jsconst 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.
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com