מה לומדים

מפתחי צד-לקוח כבר מזמן יודעים שדרושה הפרדה בין קוד המקור כמו שאנחנו כותבים אותו לבין קבצי ה JavaScript שמגיעים לדפדפן: אנחנו מכווצים ומשנים את קבצי ה JavaScript שלנו, אנחנו מפעילים TypeScript או Babel או Scss ואנחנו מחברים אותם יחד כדי לשפר את זמני טעינת העמוד.

את כל הפעולות האלה ורבות נוספות עושה Webpack. וובפאק החל את דרכו ב 2012 וגדל עם האינטרנט כך שהיום הוא חלק בלתי נפרד מהיום-יום של מפתחי צד-לקוח, וכמעט כל פרויקט מודרני משתמש בו. אבל, היכולות הרבות והגמישות של וובפאק הן גם התכונות שהופכות אותו למורכב ללמידה, ולכן מתכנתים רבים מעדיפים להעתיק קבצי הגדרות מהרשת ולקוות לטוב. הבעיה עם גישה כזו שגם אם היא עובדת, מבנה הפרויקט שלכם לא יהיה אופטימלי ויהיה לכם קשה למצוא ולתקן בעיות.

בקורס Webpack אני לוקח גישה הפוכה: במקום להתחיל מהגדרות וובפאק אנחנו מתחילים מהפרויקט ומתאימים את הגדרות הוובפאק לפרויקט. וכך פרויקט אחר פרויקט מתקדמים בקורס וכותבים יחד את הגדרות וובפאק הרלוונטיות לכל היבט בפרויקט ולכל סוג פרויקט. כך עבור כל פיסקה שאנחנו מוסיפים להגדרות נבין בדיוק למה היא שם ואיזה בעיות היא פותרת. הבנה מעמיקה זו היא שתאפשר לנו לזהות ולתקן טעויות כשהן קורות.

במהלך הקורס נדבר על:

  1. מבנה פרויקט Webpack עם npm ו Babel.
     
  2. מבנה פרויקט המשלב Scss ו CSS Modules.
     
  3. יצירת קוד יעיל למצב Production, כמו גם כתיבת קוד נוחה במצב פיתוח.
     
  4. פיצול קוד ו Lazy Loading.
     
  5. איך לבנות פרויקטי TypeScript עם Webpack.
     
  6. איך לבנות פרויקטי React עם Webpack (כולל HMR).
     
  7. איך לשלב כלי Linting חיצוני כדוגמת ESLint.
     
  8. איך לבנות פרויקט צד-לקוח הכולל בדיקות יחידה עם Mocha.
     
  9. איך לשלב קוד צד לקוח Webpack עם קוד צד שרת Express ו Node.JS.

כך בנוסף להיכרות טובה עם Webpack תקבלו היכרות טובה עם מגוון הסוגים של פרויקטי ווב מודרניים.

 

סילבוס מפורט
1. ברוכים הבאים לקורס
תצוגה מקדימה
2. שילוב וובפאק בפרויקט ווב
תצוגה מקדימה
3. הוספת Babel לפרויקט Webpack
תצוגה מקדימה
4. שימוש בספריות חיצוניות בפרויקט Webpack
5. טעינת קבצי CSS מתוך פרויקט Webpack
6. טיפול בקישורים בקבצי ה CSS
7. הפלאגין HTML Webpack Plugin
8. שימוש ב Scss בפרויקט Webpack
9. שימוש ב Browser Cache בפרויקט Webpack
10. איפה Webpack מחפש מודולים
11. קיצורי דרך לטעינת מודולים
12. פינוקים למצב פיתוח ב Webpack
13. החלפת מודולים HMR
14. טעינת קבצים ששמם לא ידוע עם Context
15. טעינה עצלה של מודולים
16. ניעור העץ - Tree Shaking
17. מעבר ל Production
18. תבנית לפרויקט TypeScript
19. שילוב ESLint בתהליך הבניה
20. שימוש ב CSS Modules בפרויקט צד-לקוח
21. פיתוח פרויקט Webpack הכולל בדיקות יחידה באמצעות Mocha
22. דוגמא לפרויקט React מלא באמצעות Webpack
23. שילוב HMR בפרויקט ריאקט
24. שילוב וובפאק עם Express - מצב פיתוח
25. שילוב וובפאק עם Express - מצב ייצור
26. סיכום
Teacher

מדריך הקורס - ינון פרק

הי! אני ינון פרק. אני מתכנת שכותב קוד כל יום מאז שנת 2002, ומשנת 2012 גם מדריך קורסים בפיתוח למתכנתים בחברות תוכנה מובילות בארץ. בין השאר לימדתי ב Intel, IBM, Amdocs, Sapiens, eBay ובעוד עשרות חברות הייטק נוספות כאן בארץ.

את הקורסים באתר אני מלמד כמו שאני מלמד קורסים בכיתה: בצורה יסודית, תוך התעמקות בפרטים ובמטרה לתת לכם הבנה טובה של המנגנונים. בשביל להצליח לבנות פרויקט או להתקבל לעבודה לא מספיק לדעת לבנות משהו, צריך גם להבין בדיוק איך זה עובד.

איך זה עובד - מסלול מנוי חודשי

  • טקסט מלא בעברית בו תוכלו להשתמש כדי להיזכר בנושא אחרי שראיתם את הוידאו.
  • תיקיית דוגמאות עם כל הקוד שבניתי בוידאו, כדי שתוכלו לנסות ולהריץ את כל הקוד על המכונה שלכם תוך כדי הצפיה או אחריה.
  • תרגול מלווה על כל נושא אותו תוכלו לפתור כדי לקבל חיזוק נוסף להבנה שלכם.
  • גישה לפורום תלמידים שם תוכלו לשאול כל שאלה מקצועית או לשתף פיתרונות שלכם לתרגילים כדי לקבל משוב על העבודה שלכם.
  • השלמת תכנים מקורסים אחרים באתר - במידה ותראו שחסר לכם חלק מחומר הרקע תוכלו לעשות הפסקה, להשלים את התכנים מהקורסים האחרים באתר ואז לחזור ללמוד קורס זה.
המנוי הינו ללא התחייבות ומחויב מדי חודש בחודשו עבור אותו החודש.

Webpack: קורס אונליין בעברית

קורס Webpack ייתן לכם את הכלים לכתוב ולקרוא קבצי webpack.config.js ולהגדיר באמצעותם את כללי הבניה לסוגים רבים של פרויקטי ווב מודרניים.

בקצרה

  • 26 שיעורים
  • 4 שעות וידאו
  • גישה לכל תכני הקורס ולכל שאר הקורסים באתר
  • אתם לא לבד! עזרה מקצועית דרך המייל ובקבוצת הדיונים
  • הצטרפו עכשיו