webpack ขึ้นอยู่กับ node.js Webpack เป็นเครื่องมือบรรจุภัณฑ์โมดูลแบบคงที่สำหรับแอปพลิเคชัน JavaScript สมัยใหม่ ซึ่งได้รับการพัฒนาโดยใช้ node.js โดยต้องมีการรองรับส่วนประกอบ node.js เมื่อใช้งาน จะต้องติดตั้งโดยใช้ npm หรือ cnpm และไวยากรณ์คือ "cnpm install webpack -ก"
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 7, nodejs เวอร์ชัน 16, คอมพิวเตอร์ DELL G3
Webpack เป็นเครื่องมือรวบรวมโค้ดที่มีทางเข้า ทางออก ตัวโหลด และปลั๊กอิน webpack เป็นเครื่องมือรวมโมดูลแบบคงที่สำหรับแอปพลิเคชัน JavaScript สมัยใหม่ โดยจะดำเนินการวิเคราะห์แบบคงที่ขึ้นอยู่กับการขึ้นต่อกันของโมดูล จากนั้นสร้างทรัพยากรแบบคงที่ที่สอดคล้องกันสำหรับโมดูลเหล่านี้ตามกฎที่ระบุ
เมื่อ webpack ประมวลผลแอปพลิเคชัน มันจะสร้างกราฟการขึ้นต่อกันภายในที่แมปกับแต่ละโมดูลที่โปรเจ็กต์ต้องการ และสร้างบันเดิลอย่างน้อยหนึ่งบันเดิล
Webpack เป็นเครื่องมือจัดทำแพ็กเกจส่วนหน้าที่พัฒนาขึ้นโดยใช้ node.js โดยต้องมีการรองรับส่วนประกอบ node.js เมื่อใช้งาน
ติดตั้ง Webpack
1 การทำงานของ Webpack ขึ้นอยู่กับ Node.js ดังนั้นจึงต้องติดตั้ง Node.js ก่อน
หลังจากการติดตั้งเสร็จสมบูรณ์ ให้ป้อนคำสั่งสองบรรทัดต่อไปนี้ในหน้าต่างบรรทัดคำสั่ง หากหมายเลขเวอร์ชันปรากฏขึ้น แสดงว่าการติดตั้งสำเร็จ
$ node -v$ npm -v
2 จากนั้นคุณสามารถติดตั้ง Webpack ผ่าน npm (เครื่องมือการจัดการแพ็คเกจที่ใช้ Node.js)
เนื่องจากแหล่งที่มาของ npm อยู่ต่างประเทศ ความเร็วในการติดตั้งอาจช้า ขอแนะนำให้คุณใช้ npm mirror cnpm ของ Taobao แต่สิ่งหนึ่งที่ควรทราบก็คือ แพ็คเกจบางอย่างใน cnpm จะแตกต่างออกไป (โดยทั่วไปแล้ว จะไม่ส่งผลกระทบต่อการใช้งาน)
คุณสามารถกำหนดค่า cnpm ให้เสร็จสมบูรณ์ผ่านโค้ดบรรทัดต่อไปนี้
$ npm install -g cnpm --registry=https ://registry .npm.taobao.org
ใช้ cnpm เพื่อติดตั้ง webpack:
cnpm ติดตั้ง webpack -g
สร้างโครงการ
ต่อไปเราจะสร้างแอปไดเร็กทอรี:
แอป mkdir
เพิ่มไฟล์ runoob1.js ในไดเร็กทอรีแอป รหัสจะเป็นดังนี้:
ไฟล์ app/runoob1.js
document.write ("ใช้งานได้"); เพิ่มไฟล์ index.html ในไดเร็กทอรี app รหัสจะเป็นดังนี้:
ไฟล์ app/index.html
<html>
<หัว>
<meta charset="utf-8">
</หัว>
<ร่างกาย>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</ร่างกาย>
</html> ต่อไปเราใช้คำสั่ง webpack เพื่อจัดทำแพ็กเกจ:
webpack runoob1.js Bundle.js
การดำเนินการคำสั่งข้างต้นจะคอมไพล์ไฟล์ runoob1.js และสร้างไฟล์ Bundle.js หลังจากสำเร็จ ข้อมูลเอาต์พุตจะเป็นดังนี้:
แฮช : a41c6217554e666594cb
เวอร์ชัน: webpack 1.12.13
เวลา: 50ms
ขนาดสินทรัพย์ ชิ้น ชื่อชิ้น
Bundle.js 1.42 kB 0 [ปล่อยออกมา] หลัก
[0] ./runoob1.js 29 ไบต์ {0} [สร้าง] เปิด index.html ในเบราว์เซอร์ ผลลัพธ์ที่ได้จะเป็นดังนี้:
