close

Webpack Panduan untuk Pemula

Webpack adalah alat yang sangat berguna dalam pengembangan web modern, membantu pengelolaan sumber daya dan optimalisasi proyek. Berikut adalah panduan dasar untuk pendatang baru tentang cara menggunakan Webpack:

Install Webpack

Pertama, instal Node.js jika Anda belum melakukannya. Kemudian, buat direktori untuk proyek Anda dan buka jendela Terminal/Command Prompt di direktori tersebut. Jalankan perintah berikut untuk menginstal Webpack dan webpack-cli(antarmuka baris perintah Webpack):

npm install webpack webpack-cli --save-dev

Buat Webpack Konfigurasi

Buat file bernama webpack.config.js di root direktori proyek Anda. Di sinilah Anda akan mengonfigurasi Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

Buat Folder dan File

Buat src folder di direktori root, dan di dalamnya, buat file bernama index.js untuk dijadikan file utama aplikasi Anda.

Berlari Webpack

Buka Terminal dan jalankan perintah berikut untuk mengkompilasi kode sumber Anda menggunakan Webpack:

npx webpack

Setelah menjalankan perintah ini, Webpack akan mengikuti konfigurasi, mengkompilasi index.js file, dan membuat file keluaran bernama bundle.js di dist direktori.

Gunakan dalam HTML

Buat file HTML di dist direktori atau lokasi pilihan Anda dan tautkan ke bundle.js file tersebut:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

Jalankan Aplikasi

Buka file HTML di browser Anda dan periksa apakah aplikasi Anda berfungsi.

Ini hanya panduan dasar. Webpack memiliki banyak fitur canggih seperti menangani CSS, mengelola modul, menggunakan loader dan plugin, pengoptimalan kode sumber, dan banyak lagi. Jelajahi dokumentasi resmi Webpack untuk memanfaatkan sepenuhnya kemampuan alat ini.