close

Webpack Panduan untuk Pemula

Webpack ialah alat yang sangat berguna dalam pembangunan web moden, membantu dalam pengurusan sumber dan pengoptimuman untuk projek. Berikut ialah panduan asas untuk pendatang baru tentang cara menggunakan Webpack:

Pasang Webpack

Mula-mula, pasang Node.js jika anda belum melakukannya. Kemudian, buat direktori untuk projek anda dan buka tetingkap Terminal/Command Prompt dalam direktori itu. Jalankan arahan berikut untuk memasang Webpack dan webpack-cli(antara muka baris arahan Webpack):

npm install webpack webpack-cli --save-dev

Buat Webpack Konfigurasi

Buat fail bernama webpack.config.js dalam akar direktori projek anda. Di sinilah anda akan mengkonfigurasi 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 Fail

Buat src folder dalam direktori akar, dan di dalamnya, buat fail bernama index.js untuk berfungsi sebagai fail utama untuk aplikasi anda.

Lari Webpack

Buka a Terminal dan jalankan arahan berikut untuk menyusun kod sumber anda menggunakan Webpack:

npx webpack

Selepas menjalankan arahan ini, Webpack akan mengikuti konfigurasi, menyusun index.js fail, dan mencipta fail output yang dinamakan bundle.js dalam dist direktori.

Gunakan dalam HTML

Buat fail HTML dalam dist direktori atau lokasi pilihan anda dan pautan ke bundle.js fail:

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

Jalankan Aplikasi

Buka fail HTML dalam penyemak imbas anda dan semak sama ada aplikasi anda berfungsi.

Ini hanyalah panduan asas. Webpack mempunyai banyak ciri berkuasa seperti mengendalikan CSS, mengurus modul, menggunakan pemuat dan pemalam, pengoptimuman kod sumber dan banyak lagi. Terokai dokumentasi rasmi Webpack untuk memanfaatkan sepenuhnya keupayaan alat ini.