Assets ใน Webpack

ในทุกโปรเจกต์จะมีทรัพยากรบางอย่าง หรือ แอสเซต (assets) แอสเซตเหล่านี้คือรูปภาพ ไฟล์ฟอนต์ และสิ่ง คล้ายคลึงกัน

โดยทั่วไป เราต้องการเพียงย้าย ทรัพยากรจากโฟลเดอร์โปรเจกต์ไปยังโฟลเดอร์ build แต่ปัญหากับแคชก็เกิดขึ้นอีกครั้ง ตัวอย่างเช่น เบราว์เซอร์แคชรูปภาพ นั่นหมายความว่าหากเราเปลี่ยนแปลง รูปภาพ แต่ไม่ได้เปลี่ยน ชื่อไฟล์ ผู้ใช้ เว็บไซต์จะเห็นเวอร์ชันก่อนหน้า ของรูปภาพ เนื่องจากรูปนั้น ถูกแคชไว้แล้ว

วิธีแก้ปัญหา ดังที่คุณทราบแล้ว คือการเพิ่มแฮชลงในชื่อไฟล์ Webpack อนุญาตให้คัดลอกไฟล์ ทรัพยากรไปยังโฟลเดอร์ build พร้อมกับเพิ่ม แฮชให้กับไฟล์เหล่านั้น และที่สำคัญที่สุด คือเปลี่ยนพาธไปยัง ทรัพยากรเหล่านี้ในไฟล์ทั้งหมดให้เป็นพาธใหม่

ใน Webpack การทำงานกับ assets ดำเนินการ โดยใช้โมดูล assets พิเศษ มีสี่ประเภท: asset/resource asset/inline, asset/source asset

โมดูล asset/resource คัดลอกไฟล์ จากโฟลเดอร์โปรเจกต์ไปยังโฟลเดอร์ build และแทนที่ พาธไปยังไฟล์เหล่านั้นด้วยพาธใหม่ โมดูล asset/inline รับไฟล์ จากโฟลเดอร์โปรเจกต์ และในโค้ด build จะแทนที่พาธไปยังไฟล์ด้วย base64 โมดูล asset/source รับไฟล์ จากโฟลเดอร์โปรเจกต์ และส่งคืนไฟล์เหล่านั้น ในรูปแบบสตริงข้อความ โมดูล asset เลือกเองว่าจะคัดลอก ไฟล์ไปยังโฟลเดอร์ build หรือแปลงเป็น base การเลือกดำเนินการขึ้นอยู่กับ ขนาดไฟล์ โดยค่าเริ่มต้นไฟล์ ที่ใหญ่กว่า 8kb จะถูก build เป็นไฟล์

โครงร่างทั่วไปของการใช้โมดูลเหล่านี้ มีลักษณะดังนี้:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // ไฟล์
      type: 'asset/resource' // ประเภทโมดูล
    }
  ]
},