מפתחי צד-לקוח כבר מזמן יודעים שדרושה הפרדה בין קוד המקור כמו שאנחנו כותבים אותו לבין קבצי ה JavaScript שמגיעים לדפדפן: אנחנו מכווצים ומשנים את קבצי ה JavaScript שלנו, אנחנו מפעילים TypeScript או Babel או Scss ואנחנו מחברים אותם יחד כדי לשפר את זמני טעינת העמוד.
את כל הפעולות האלה ורבות נוספות עושה Webpack. וובפאק החל את דרכו ב 2012 וגדל עם האינטרנט כך שהיום הוא חלק בלתי נפרד מהיום-יום של מפתחי צד-לקוח, וכמעט כל פרויקט מודרני משתמש בו. אבל, היכולות הרבות והגמישות של וובפאק הן גם התכונות שהופכות אותו למורכב ללמידה, ולכן מתכנתים רבים מעדיפים להעתיק קבצי הגדרות מהרשת ולקוות לטוב. הבעיה עם גישה כזו שגם אם היא עובדת, מבנה הפרויקט שלכם לא יהיה אופטימלי ויהיה לכם קשה למצוא ולתקן בעיות.
בקורס Webpack אני לוקח גישה הפוכה: במקום להתחיל מהגדרות וובפאק אנחנו מתחילים מהפרויקט ומתאימים את הגדרות הוובפאק לפרויקט. וכך פרויקט אחר פרויקט מתקדמים בקורס וכותבים יחד את הגדרות וובפאק הרלוונטיות לכל היבט בפרויקט ולכל סוג פרויקט. כך עבור כל פיסקה שאנחנו מוסיפים להגדרות נבין בדיוק למה היא שם ואיזה בעיות היא פותרת. הבנה מעמיקה זו היא שתאפשר לנו לזהות ולתקן טעויות כשהן קורות.
במהלך הקורס נדבר על:
- מבנה פרויקט Webpack עם npm ו Babel.
- מבנה פרויקט המשלב Scss ו CSS Modules.
- יצירת קוד יעיל למצב Production, כמו גם כתיבת קוד נוחה במצב פיתוח.
- פיצול קוד ו Lazy Loading.
- איך לבנות פרויקטי TypeScript עם Webpack.
- איך לבנות פרויקטי React עם Webpack (כולל HMR).
- איך לשלב כלי Linting חיצוני כדוגמת ESLint.
- איך לבנות פרויקט צד-לקוח הכולל בדיקות יחידה עם Mocha.
- איך לשלב קוד צד לקוח Webpack עם קוד צד שרת Express ו Node.JS.
כך בנוסף להיכרות טובה עם Webpack תקבלו היכרות טובה עם מגוון הסוגים של פרויקטי ווב מודרניים.