שלום אורח התחבר

המדריך המלא ל Webpack 4: קורס אונליין בעברית

קורס מקיף על Webpack 4 המשלב תבניות פרויקט מהעולם האמיתי ו Best Practices לפיתוח. לימוד מהצעד הראשון ועד הנושאים המתקדמים בקצב שלך ובעברית.

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

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

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

מה לומדים

מפתחי צד-לקוח כבר מזמן יודעים שדרושה הפרדה בין קוד המקור כמו שאנחנו כותבים אותו לבין קבצי ה 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 תקבלו היכרות טובה עם מגוון הסוגים של פרויקטי ווב מודרניים.

 

כמה זה עולה?

מנוי חודשי מתחדש לאתר
רק 117 ₪ בחודש
  • גישה מיידית לכל תכני הלימוד בכל הקורסים באתר
  • תרגול מלווה ברמה גבוהה
  • מענה בעברית לכל שאלה דרך קבוצת הדיונים
  • גישה לכל הוובינרים המוקלטים באתר
  • המנוי ללא התחייבות וניתן לבטל בכל עת
  • קראו עוד על מסלול המנויים
להצטרפות לחצו כאן והתחילו ללמוד עוד היום

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

מיד לאחר התשלום תקבלו גישה לכל תכני הלימוד באתר ותוכלו להתחיל ללמוד את הקורס ״המדריך המלא ל Webpack 4״. המנוי נותן לכם:

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

המנוי הינו ללא התחייבות ומחויב מדי חודש בחודשו עבור אותו החודש.

סילבוס מפורט:

    2

    מבנה פרויקט

    • 4שימוש בספריות חיצוניות בפרויקט Webpack
    • 5טעינת קבצי CSS מתוך פרויקט Webpack
    • 6טיפול בקישורים בקבצי ה CSS
    • 7הפלאגין HTML Webpack Plugin
    • 8שימוש ב Scss בפרויקט Webpack

    3

    הגדרות שחשוב להכיר

    • 9שימוש ב Browser Cache בפרויקט Webpack
    • 10איפה Webpack מחפש מודולים
    • 11קיצורי דרך לטעינת מודולים
    • 12פינוקים למצב פיתוח ב Webpack
    • 13החלפת מודולים HMR
    • 14טעינת קבצים ששמם לא ידוע עם Context
    • 15טעינה עצלה של מודולים
    • 16ניעור העץ - Tree Shaking
    • 17מעבר ל Production

    4

    כלים חיצוניים

    • 18תבנית לפרויקט TypeScript
    • 19שילוב ESLint בתהליך הבניה

    5

    תבניות לפרויקטים

    • 20שימוש ב CSS Modules בפרויקט צד-לקוח
    • 21פיתוח פרויקט Webpack הכולל בדיקות יחידה באמצעות Mocha
    • 22דוגמא לפרויקט React מלא באמצעות Webpack
    • 23שילוב HMR בפרויקט ריאקט
    • 24שילוב וובפאק עם Express - מצב פיתוח
    • 25שילוב וובפאק עם Express - מצב ייצור