บทเรียนสอนใช้งาน Webpack 5

บทเรียนสอนตัวรวมโมดูล Webpack ที่เข้าใจง่าย พร้อมทั้งทฤษฎีและโจทย์สำหรับผู้เริ่มต้น

พื้นฐาน

หลักการทำงานของตัวรวม Webpack

ปัญหาเกี่ยวกับแคชในเบราว์เซอร์

Webpack ผ่าน ES โมดูลใน Webpack

การติดตั้ง Webpack

การตั้งค่าเริ่มต้นสำหรับตัวแปรมวลรวม Webpack

การตั้งค่าการรันการบัดเดิลด้วย Webpack

การทดสอบการบิลด์ด้วย Webpack

การเชื่อมต่อ Bundle กับหน้าเว็บใน Webpack

การนำเข้าไฟล์ไปยังจุดเข้าใน Webpack

เส้นทางสัมบูรณ์ใน Webpack

ปลั๊กอินใน Webpack

โหลดเดอร์ใน Webpack

โหมดการบิลด์

ประเภทของโหมดการบิลด์ใน Webpack

การเปลี่ยนโหมดการบิลด์ในไฟล์การกำหนดค่าใน Webpack

การกำหนดโหมดการ build ผ่าน scripts ใน Webpack

การ build อัตโนมัติใน Webpack

จุดเข้าและออก

จุดเข้าและจุดออกใน Webpack

จุดออกใน Webpack

หลายจุดเข้าใน Webpack

แฮชในไฟล์บิลด์ใน Webpack

การตั้งชื่อ Entry Points ใน Webpack

การตั้งชื่อ entry point แบบ array ใน Webpack

ชื่อไฟล์ที่บิลด์ใน Webpack

ชื่อและแฮชของไฟล์ที่บิลด์ใน Webpack

เส้นทางไปยังโฟลเดอร์การ build ใน Webpack

บริบทของจุดเข้าใน Webpack

สไตล์

การนำเข้า CSS Styles ใน Webpack

ตัวโหลดสำหรับสไตล์ CSS ใน Webpack

การตั้งค่าimport CSS styles ใน Webpack

การทดสอบการนำเข้า CSS styles ใน Webpack

การตั้งค่าการรวม CSS เป็น bundle ใน Webpack

การทดสอบการบิลด์ CSS เป็นบันเดิลใน Webpack

ชื่อไฟล์ CSS Bundle ใน Webpack

แฮช CSS bundle ใน Webpack

Multiple CSS Bundles in Webpack

การเชื่อมต่อ CSS libraries ใน Webpack

การทำงานกับ LESS ใน Webpack

การทำงานกับ SASS ใน Webpack

HTML

การทำงานกับ HTML layouts ใน Webpack

การสร้างเลย์เอาท์ HTML ใน Webpack

หลายบันเดิลสคริปต์ในเทมเพลตด้วย Webpack

บันเดิลสคริปต์ที่มีแฮชในเลย์เอาต์ใน Webpack

การรวมไฟล์สไตล์ในเลย์เอาต์ด้วย Webpack

การมีหลายบันเดิลของสไตล์ในเลย์เอาต์ใน Webpack

ไฟล์เลย์เอาต์ของคุณเองใน Webpack

Assets

Assets ใน Webpack

Assets ใน JavaScript Bundles ใน Webpack

Assets ใน CSS Bundles ของ Webpack

การปรับแต่งเส้นทางไปยังไฟล์ Assets ใน Webpack

การกำหนดเส้นทางแบบกำหนดเองให้กับกลุ่ม assets ใน Webpack

อินไลน์แอสเซตใน Webpack

Source assets ใน Webpack

Assets ทั่วไปใน Webpack

ปลั๊กอิน

การล้างโฟลเดอร์ build ใน Webpack

การคัดลอกไฟล์ใน Webpack