webpack didasarkan pada node.js. Webpack adalah alat pengemasan modul statis untuk aplikasi JavaScript modern. Ini dikembangkan berdasarkan node.js. Ini memerlukan dukungan komponen node.js saat menggunakannya. Ini perlu diinstal menggunakan npm atau cnpm, dan sintaksisnya adalah "cnpm install webpack -G".
Lingkungan operasi tutorial ini: sistem Windows 7, nodejs versi 16, komputer DELL G3.
Webpack adalah alat kompilasi kode dengan pintu masuk, keluar, pemuat, dan plug-in. webpack adalah alat bundling modul statis untuk aplikasi JavaScript modern. Ini akan melakukan analisis statis berdasarkan ketergantungan modul, dan kemudian menghasilkan sumber daya statis yang sesuai untuk modul ini sesuai dengan aturan yang ditentukan.
Saat webpack memproses aplikasi, webpack secara internal membuat grafik ketergantungan yang memetakan ke setiap modul yang dibutuhkan oleh proyek dan menghasilkan satu atau lebih bundel.
Webpack adalah alat pengemasan front-end yang dikembangkan berdasarkan node.js. Ini memerlukan dukungan komponen node.js saat menggunakannya.
Instal Webpack
① Pengoperasian Webpack bergantung pada Node.js, jadi Node.js perlu diinstal terlebih dahulu.
Setelah instalasi selesai, masukkan dua baris perintah berikut di jendela baris perintah. Jika nomor versi muncul, instalasi berhasil.
$ node -v$ npm -v
② Kemudian Anda dapat menginstal Webpack melalui npm (alat manajemen paket berdasarkan Node.js).
Karena sumber npm berada di luar negeri, kecepatan instalasi mungkin lambat. Disarankan agar Anda menggunakan npm mirror cnpm Taobao. Namun satu hal yang perlu diperhatikan adalah beberapa paket di cnpm akan berbeda (secara umum, hal ini tidak mempengaruhi penggunaan).
Anda dapat menyelesaikan konfigurasi cnpm melalui baris kode berikut
$ npm install -g cnpm --registry=https ://registry .npm.taobao.org
Gunakan cnpm untuk menginstal webpack:
cnpm install webpack -g
Buat proyek
Selanjutnya kita buat direktori app:
mkdir app
Tambahkan file runoob1.js pada direktori app, kodenya seperti berikut:
app/runoob1.js file
document.write("Berhasil."); Tambahkan file index.html di direktori aplikasi, kodenya sebagai berikut:
file app/index.html
<html>
<kepala>
<meta charset="utf-8">
</kepala>
<tubuh>
<skrip type="teks/javascript" src="bundle.js" charset="utf-8"></script>
</tubuh>
</html> Selanjutnya kita menggunakan perintah webpack untuk mengemas:
webpack runoob1.js bundle.js
Menjalankan perintah di atas akan mengkompilasi file runoob1.js dan menghasilkan file bundle.js. Setelah berhasil, informasi keluarannya adalah sebagai berikut:
Hash : a41c6217554e666594cb
Versi: webpack 1.12.13
Waktu: 50 ms
Nama Potongan Potongan Ukuran Aset
bundle.js 1,42 kB 0 [dipancarkan] utama
[0] ./runoob1.js 29 bytes {0} [built] Buka index.html di browser, hasil outputnya seperti berikut:
