Rumah >hujung hadapan web >tutorial js >Adakah pek web berdasarkan node.js?
Adakah pek web berdasarkan node.js?
- 青灯夜游asal
- 2022-07-12 18:57:203009semak imbas
Pek web adalah berdasarkan node.js. Webpack ialah alat pembungkusan modul statik untuk aplikasi JavaScript moden. Ia dibangunkan berdasarkan node.js. Ia memerlukan sokongan komponen node.js apabila menggunakannya. Ia perlu dipasang menggunakan npm atau cnpm, dan sintaksnya ialah "cnpm install webpack -g".
Persekitaran pengendalian tutorial ini: sistem Windows 7, nodejs versi 16, komputer DELL G3.
Webpack ialah alat penyusunan kod dengan pintu masuk, keluar, pemuat dan pemalam. webpack ialah alat penggabungan modul statik untuk aplikasi JavaScript moden. Ia akan melakukan analisis statik berdasarkan kebergantungan modul, dan kemudian menjana sumber statik yang sepadan untuk modul ini mengikut peraturan yang ditentukan.
Apabila webpack memproses aplikasi, ia secara dalaman membina graf pergantungan yang memetakan kepada setiap modul yang diperlukan oleh projek dan menjana satu atau lebih berkas.
Webpack ialah alat pembungkusan bahagian hadapan yang dibangunkan berdasarkan node.js Ia memerlukan sokongan komponen node.js apabila menggunakannya.
Pasang Webpack
① Pengendalian Webpack memerlukan Node.js, jadi Node.js perlu dipasang terlebih dahulu.
Selepas pemasangan selesai, masukkan dua baris arahan berikut dalam tetingkap baris arahan Jika nombor versi muncul, pemasangan berjaya.
$ node -v$ npm -v
② Kemudian anda boleh memasang Webpack melalui npm (alat pengurusan pakej berdasarkan Node.js)
Oleh kerana sumber npm berada di luar negara, kelajuan pemasangan mungkin perlahan. Anda disyorkan agar menggunakan cnpm cermin npm Taobao. Tetapi satu perkara yang perlu diperhatikan ialah beberapa pakej dalam cnpm akan berbeza (secara umumnya, ia tidak menjejaskan penggunaan)
Konfigurasi cnpm boleh diselesaikan melalui baris kod berikut
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Gunakan cnpm untuk memasang webpack:
cnpm install webpack -g
Buat projek
Seterusnya kami mencipta apl direktori:
mkdir app
Tambahkan fail runoob1.js dalam direktori aplikasi, kodnya adalah seperti berikut:
fail app/runoob1.js
document.write("It works.");Tambahkan fail index.html dalam direktori aplikasi, kodnya adalah seperti berikut:
fail app/index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>Seterusnya kami menggunakan arahan webpack untuk membungkus:
webpack runoob1.js bundle.js
Melaksanakan arahan di atas akan menyusun fail runoob1.js dan menjana fail js, maklumat output selepas kejayaan adalah seperti berikut:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]Buka index.html dalam penyemak imbas, hasil output adalah seperti berikut:
Lagi Untuk pengetahuan berkaitan nod, sila lawati: tutorial nodejs!
Atas ialah kandungan terperinci Adakah pek web berdasarkan node.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!