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(การรวมหน่วยความจำ, การโหลดซ้ำแบบร้อน) แต่อยู่ในรูปแบบที่สามารถแทรกลงในserver/expressแอปพลิเคชันได้ ด้วยวิธีนี้คุณมีประเภทของเซิร์ฟเวอร์ (the webpack-dev-server) ภายในเซิร์ฟเวอร์โหนด อ๊ะ: นี่ฝันบ้าเหรอ ??? งานชิ้นนี้จะแก้สมการ dev และ prod และทำให้ชีวิตง่ายขึ้นได้อย่างไร

webpack-hot-middleware: นี่ ... ติดอยู่ที่นี่ ... พบชิ้นส่วนนี้เมื่อมองหาwebpack-dev-middleware... ไม่รู้ว่าจะใช้อย่างไร

ENDNOTE: ขออภัยมีการคิดผิด ฉันต้องการความช่วยเหลือจริงๆเพื่อที่จะปฏิเสธความหลากหลายเหล่านี้ในสภาพแวดล้อมที่ซับซ้อน หากต้องการความสะดวกโปรดเพิ่มแพ็คเกจ / ข้อมูลเพิ่มเติมเพื่อสร้างสถานการณ์ทั้งหมด

webpack

ตามที่คุณได้อธิบายไว้ Webpack เป็นชุดรวมโมดูลซึ่งรวมเอารูปแบบโมดูลต่างๆเป็นหลักเพื่อให้สามารถเรียกใช้ในเบราว์เซอร์ได้ มันมีทั้งCLIและโหนด API

webpack-dev-middleware

Webpack Dev Middleware เป็นมิดเดิลแวร์ที่สามารถติดตั้งในเซิร์ฟเวอร์ด่วนเพื่อรองรับการรวบรวมชุดล่าสุดของคุณในระหว่างการพัฒนา การใช้งานนี้webpack's โหนด API ในโหมดนาฬิกาและแทนที่จะแสดงผลให้เป็นระบบไฟล์ที่เอาท์พุทในหน่วยความจำ

สำหรับการเปรียบเทียบคุณอาจใช้สิ่งที่ต้องการexpress.staticแทนมิดเดิลแวร์นี้ในการผลิต

webpack-dev-server

Webpack Dev Server เป็นเซิร์ฟเวอร์ด่วนที่ใช้webpack-dev-middlewareเพื่อให้บริการบันเดิลล่าสุดและจัดการคำขอ hot module replacement (HMR) เพิ่มเติมสำหรับการอัพเดตโมดูลสดในไคลเอ็นต์

webpack-hot-middleware

Webpack Hot Middleware เป็นอีกทางเลือกหนึ่งwebpack-dev-serverแต่แทนที่จะเริ่มต้นเซิร์ฟเวอร์เองจะช่วยให้คุณสามารถติดตั้งในเซิร์ฟเวอร์ด่วนที่มีอยู่ / กำหนดเองควบคู่ไปwebpack-dev-middlewareด้วย

นอกจากนี้ ...

webpack-hot-server-middleware

เพียงเพื่อสร้างความสับสนให้สิ่งที่มากยิ่งขึ้นนอกจากนี้ยังมี Webpack ร้อนเซิร์ฟเวอร์มิดเดิ้ลซึ่งถูกออกแบบมาเพื่อใช้ควบคู่webpack-dev-middlewareและwebpack-hot-middlewareจะจัดการกับการเปลี่ยนโมดูลร้อนของปพลิเคชันเซิร์ฟเวอร์แสดงผล

เมื่ออัปเดตในปี 2018 และพิจารณาบันทึกwebpack-dev-serverในหน้า GitHub อย่างเป็นทางการ:

โครงการในการบำรุงรักษาโปรดทราบว่า webpack-dev-server อยู่ในโหมดการบำรุงรักษาเท่านั้นและจะไม่ยอมรับคุณสมบัติเพิ่มเติมใด ๆ ในระยะเวลาอันใกล้นี้ คำขอคุณลักษณะใหม่ส่วนใหญ่สามารถทำได้ด้วยมิดเดิลแวร์ Express โปรดตรวจสอบการใช้ตะขอก่อนและหลังในเอกสารประกอบ

อะไรคือทางเลือกที่เป็นธรรมชาติในการสร้าง Webpack HMR?