อะไรคือความแตกต่างระหว่างตัวโหลดและปลั๊กอินใน Webpack?
เอกสารสำหรับปลั๊กอินเพียงแค่พูดว่า:
ใช้ปลั๊กอินเพื่อเพิ่มฟังก์ชันที่เกี่ยวข้องกับบันเดิลใน webpack
ฉันรู้ว่า babel ใช้ตัวโหลดสำหรับการแปลง jsx / es2015 แต่ดูเหมือนว่างานทั่วไปอื่น ๆ (เช่น copy-webpack-plugin เป็นต้น) ให้ใช้ปลั๊กอินแทน
คำตอบ:
ตัวโหลดทำการแปลงก่อนการประมวลผลของไฟล์แทบทุกรูปแบบเมื่อคุณใช้ sth เช่นเดียวกับrequire("my-loader!./my-awesome-module")ในโค้ดของคุณ เมื่อเทียบกับปลั๊กอินแล้วมันค่อนข้างง่ายเนื่องจาก (a) แสดงเพียงฟังก์ชันเดียวใน webpack และ (b) ไม่สามารถมีผลต่อกระบวนการสร้างจริงได้
ในทางกลับกันปลั๊กอินสามารถรวมเข้ากับ webpack ได้อย่างลึกซึ้งเนื่องจากสามารถลงทะเบียน hooks ภายในระบบสร้าง webpacks และเข้าถึง (และแก้ไข) คอมไพเลอร์และวิธีการทำงานรวมถึงการคอมไพล์ ดังนั้นพวกมันจึงมีพลังมากกว่า แต่ยังดูแลรักษายากกว่าด้วย
การเพิ่มคำตอบเสริมและง่ายขึ้น
รถตัก:
ตัวโหลดทำงานในระดับไฟล์แต่ละไฟล์ระหว่างหรือก่อนสร้างบันเดิล
ปลั๊กอิน:
ปลั๊กอินทำงานในระดับบันเดิลหรือกลุ่มและโดยปกติจะทำงานเมื่อสิ้นสุดกระบวนการสร้างบันเดิล ปลั๊กอินยังสามารถปรับเปลี่ยนวิธีการสร้างบันเดิลได้ ปลั๊กอินมีการควบคุมที่มีประสิทธิภาพมากกว่ารถตัก
สำหรับตัวอย่างที่คุณสามารถเห็นได้อย่างชัดเจนในภาพด้านล่างที่รถตักทำงานและปลั๊กอินทำงานที่ไหน -
โดยหลักแล้ว webpack เป็นเพียงไฟล์บันเดิล เมื่อพิจารณาถึงสถานการณ์ที่เรียบง่ายมาก (ไม่มีการแยกโค้ด) อาจหมายถึงเพียงการกระทำต่อไปนี้ (ในระดับสูง):
เมื่อคุณตรวจสอบขั้นตอนข้างต้นอย่างละเอียดสิ่งนี้จะสอดคล้องกับสิ่งที่คอมไพเลอร์ Java (หรือคอมไพเลอร์ใด ๆ ) ทำ มีความแตกต่างแน่นอน แต่สิ่งเหล่านี้ไม่สำคัญที่จะต้องเข้าใจตัวโหลดและปลั๊กอิน
รถตัก:
อยู่ที่นี่เนื่องจาก webpack สัญญาว่าจะรวมไฟล์ทุกประเภทเข้าด้วยกัน
เนื่องจาก webpack ที่แกนกลางมีความสามารถเพียงพอที่จะรวมไฟล์ js ได้เท่านั้นคำสัญญานี้หมายความว่าทีมงานหลักของ webpack ต้องรวมขั้นตอนการสร้างซึ่งอนุญาตให้โค้ดภายนอกแปลงไฟล์ประเภทใดประเภทหนึ่งในลักษณะที่ webpack สามารถใช้งานได้
รหัสภายนอกเหล่านี้เรียกว่ารถตักและโดยทั่วไปจะทำงานในขั้นตอนที่ 1 และ 3 ข้างต้น ดังนั้นเนื่องจากขั้นตอนที่รถตักเหล่านี้จำเป็นต้องทำงานนั้นชัดเจนพวกเขาจึงไม่ต้องใช้ตะขอและก็ไม่มีผลต่อกระบวนการสร้าง (เนื่องจากการสร้างหรือบันเดิลจะเกิดขึ้นในขั้นตอนที่ 4 เท่านั้น)
ดังนั้น Loaders จึงเตรียมขั้นตอนสำหรับการคอมไพเลอร์และพวกเขาจัดเรียงเพิ่มความยืดหยุ่นของคอมไพเลอร์ webpack
ปลั๊กอิน:
อยู่ที่นี่เพราะแม้ว่า webpack จะไม่ได้ให้สัญญากับเอาต์พุตตัวแปรโดยตรง แต่โลกก็ต้องการและ webpack ก็อนุญาต
เนื่องจาก webpack ที่แกนหลักเป็นเพียงบันเดิลเลอร์และยังต้องทำตามขั้นตอนและขั้นตอนย่อยอีกหลายขั้นตอนจึงสามารถใช้ขั้นตอนเหล่านี้เพื่อสร้างฟังก์ชันเพิ่มเติมได้
กระบวนการสร้างการผลิต (การย่อขนาดและการเขียนลงในระบบไฟล์) ซึ่งเป็นความสามารถดั้งเดิมของคอมไพเลอร์ webpack เช่นสามารถถือว่าเป็นส่วนเสริมของความสามารถหลัก (ซึ่งเป็นเพียงการรวมกลุ่ม) และสามารถปฏิบัติได้เหมือนปลั๊กอินเนทีฟ หากพวกเขาไม่ได้จัดเตรียมไว้ก็จะมีคนอื่นทำ
เมื่อดูที่ปลั๊กอินเนทีฟด้านบนดูเหมือนว่าการรวมกลุ่มหรือการคอมไพล์ของ webpack สามารถแบ่งย่อยออกเป็นกระบวนการรวมแกนหลักรวมถึงกระบวนการปลั๊กอินเนทีฟมากมายซึ่งเราสามารถปิดหรือปรับแต่งหรือขยายได้ สิ่งนี้หมายถึงการอนุญาตให้โค้ดภายนอกเข้าร่วมในกระบวนการรวมกลุ่มในบางจุดที่สามารถเลือกได้ (เรียกว่า hooks)
ปลั๊กอินจึงมีอิทธิพลต่อเอาต์พุตและประเภทของการขยายความสามารถของคอมไพเลอร์ webpack
