คำสั่งโหลดสำหรับ Webpack คืออะไร?

เมื่อฉันมีการกำหนดค่าตัวโหลดที่มีการทดสอบหลายรายการที่ตรงกับไฟล์ฉันคาดหวังว่าจะใช้เฉพาะตัวโหลดที่ตรงกันตัวแรกเท่านั้น แต่ดูเหมือนจะไม่เป็นเช่นนั้น

ฉันพยายามอ่านแหล่งที่มาแต่เมื่อฉันพบบิตที่ฉันคิดว่าใช้ในการโหลดฉันก็ไม่เข้าใจว่ามันทำงานอย่างไร

เอกสารประกอบไม่ได้กล่าวถึงว่าสถานการณ์นั้นควรมีพฤติกรรมอย่างไร

{
    test: /\.css$/,
    loaders: ['style'],
},
{
    test: /\.css$/,
    loaders: ['css'],
},

และ

{
    test: /\.css$/,
    loaders: ['style', 'css'],
},

ดูเหมือนจะเท่ากัน ในแง่ฟังก์ชันนี้เหมือนกับstyle(css(file))(ขอบคุณมิเกล)

หมายเหตุว่าภายในloadersพวกเขาได้รับการประเมินจากขวาไปซ้าย

เอกสารอย่างเป็นทางการอธิบายได้ดีจริงๆ น่าเสียดายที่ข้อมูลที่จำเป็นทั้งหมดกระจายอยู่ในส่วนต่างๆของเอกสาร ผมขอสรุปทุกสิ่งที่คุณต้องรู้

1.

ตรวจสอบให้แน่ใจว่าอยู่ในลำดับที่ถูกต้อง (จากล่างขึ้นบน)

2.

เป็นฟังก์ชันที่ใช้แหล่งที่มาของไฟล์ทรัพยากรเป็นพารามิเตอร์และส่งคืนแหล่งข้อมูลใหม่

3.

รถตักสามารถล่ามโซ่ได้ พวกเขาถูกนำไปใช้ในท่อไปยังทรัพยากร ตัวโหลดสุดท้ายคาดว่าจะส่งคืน JavaScript ตัวโหลดซึ่งกันและกันสามารถส่งคืนแหล่งที่มาในรูปแบบที่กำหนดเองซึ่งจะถูกส่งไปยังตัวโหลดถัดไป

ดังนั้น...

ถ้าคุณมีsomefile.cssและคุณจะผ่านมันผ่านloaderOne, loaderTwo,loaderThreeเป็นพฤติกรรมเช่นฟังก์ชั่นถูกล่ามโซ่ปกติ

{
    test: /\.css$/,
    loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}

มีความหมายเหมือนกับ ...

loaderOne(loaderTwo(loaderThree(somefile.css)))

ถ้าคุณมาจากฮึดฮัด || อึกโลกมันสับสน เพียงอ่านลำดับรถตักจากขวาไปซ้าย

คำตอบนี้มีประโยชน์สำหรับฉัน แต่ฉันต้องการเสริมด้วยจุดอื่นที่มีผลต่อคำสั่งตัวโหลดซึ่งก็คือชื่อโหลด! แนวทาง

สมมติว่าคุณมีurl-loaderconfig ของคุณที่มีลำดับความสำคัญสูงกว่าfile-loaderและคุณต้องการนำเข้าเส้นทางภาพที่หลัง การไม่ทำอะไรเลยจะนำเข้าไฟล์ผ่านurl-loader(ซึ่งสร้าง data-url ที่เข้ารหัส)

คำนำหน้าการนำเข้าด้วยfile-loader!จะนำเข้าสู่ตัวโหลดนั้น

import image from 'file-loader!./my-img.png'