2
Webpack กับ webpack-dev-server เทียบกับ webpack-dev-middleware กับ webpack-hot-middleware เทียบกับอื่น ๆ
ฉันเริ่มทำงานร่วมกับwebpackกับnode/expressสภาพแวดล้อมการพัฒนาแอพลิเคชันด้านเซิร์ฟเวอร์แสดงผลด้วยReactJS react-routerฉันสับสนมากเกี่ยวกับบทบาทของแต่ละแพ็คเกจ webpack สำหรับสภาพแวดล้อม dev และ prod (รันไทม์) นี่คือบทสรุปของความเข้าใจของฉัน: webpack: เป็นแพ็กเกจซึ่งเป็นเครื่องมือในการรวมส่วนต่างๆของเว็บแอปพลิเคชันเข้าด้วยกันแล้วรวมเป็นไฟล์. js ไฟล์เดียว (ปกติbundle.js) จากนั้นไฟล์ผลลัพธ์จะถูกให้บริการในสภาพแวดล้อม prod ที่จะโหลดโดยแอปพลิเคชันและมีส่วนประกอบที่จำเป็นทั้งหมดเพื่อรันโค้ด คุณสมบัติต่างๆ ได้แก่ การย่อขนาดโค้ดการย่อขนาดและอื่น ๆ webpack-dev-server: เป็นแพ็คเกจที่มีเซิร์ฟเวอร์ในการประมวลผลไฟล์เว็บไซต์ นอกจากนี้ยังสร้างไฟล์. js ( bundle.js) ไฟล์เดียวจากคอมโพเนนต์ไคลเอ็นต์ แต่ทำหน้าที่ในหน่วยความจำ นอกจากนี้ยังมีตัวเลือก ( -hot) เพื่อตรวจสอบไฟล์สิ่งปลูกสร้างทั้งหมดและสร้างบันเดิลใหม่ในหน่วยความจำในกรณีที่มีการเปลี่ยนแปลงรหัส เซิร์ฟเวอร์ที่มีหน้าที่โดยตรงในเบราว์เซอร์ (เช่น: http:/localhost:8080/webpack-dev-server/whatever) การรวมกันของการโหลดหน่วยความจำการประมวลผลแบบร้อนและการให้บริการของเบราว์เซอร์ช่วยให้ผู้ใช้สามารถอัปเดตแอปพลิเคชันบนเบราว์เซอร์เมื่อโค้ดเปลี่ยนแปลงเหมาะสำหรับสภาพแวดล้อมการพัฒนา หากฉันมีข้อสงสัยเกี่ยวกับข้อความข้างต้นฉันไม่แน่ใจเกี่ยวกับเนื้อหาด้านล่างนี้จริงๆดังนั้นโปรดแนะนำฉันหากจำเป็น ปัญหาที่พบบ่อยเมื่อใช้webpack-dev-serverกับnode/expressเป็นสิ่งที่เป็นเซิร์ฟเวอร์ที่เป็นอยู่webpack-dev-server node/expressทำให้สภาพแวดล้อมนี้ยุ่งยากในการรันทั้งไคลเอนต์และโหนด / รหัสด่วน (API เป็นต้น) หมายเหตุ: นี่คือสิ่งที่ฉันเผชิญ แต่จะดีมากที่จะเข้าใจว่าเหตุใดจึงเกิดขึ้นในรายละเอียดเพิ่มเติม ... webpack-dev-middleware: นี่คือมิดเดิลแวร์ที่มีฟังก์ชั่นเดียวกันของwebpack-dev-server(การรวมหน่วยความจำ, …