הבלוג של ינון פרק

אחת הפונקציות הכי אהובות ב Webpack במצב פיתוח נקראת HMR או בשמה המלא Hot Module Replacement. הרעיון הוא החלפת רכיבים במערכת תוך כדי שהמערכת פועלת ובלי לטעון מחדש את העמוד.

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

פיתוח פרויקט באמצעות Webpack אומר שאנחנו יכולים להריץ קוד על כל אחד מהקבצים שאנחנו טוענים. באחד הפרקים הקודמים בסידרה למדנו על Babel וראינו איך לתרגם קבצי JavaScript בעזרתו. היום אני רוצה לדבר על Scss ואיך להשתמש ב Webpack כדי לתרגם קבצי Scss לקבצי CSS רגילים.

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

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

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

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

העברתי לא מזמן קורס בפיתוח ווב לקבוצה של מתכנתי Java מוכשרים ובאחד התרגולים שמתי לב לחלוקה בין התלמידים וביחס שלהם לתרגול-

רוב המשתתפים שהרגישו שהם יכולים לפתור את התרגיל באמת פתחו את ה IDE וניסו, חלק מהם הצליחו, חלק אחר שאל שאלות וחלק אחרון הצליח למצוא פיתרונות מעניינים לשאלות שבכלל לא שאלתי (ולא ממש לפתור את מה שאני שאלתי, אבל עדיין למדו והיה כיף).

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

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

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

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

1. הסקריפט לא מטפל בדיוק בכל מקרי הקצה שהשיטה הקודמת טיפלה בהם.

2. הסקריפט לפעמים נכשל (בלי סיבה נראית לעין).

3. אנשים לא רגילים להשתמש בסקריפט ושוכחים להפעיל אותו.

4. הסקריפט מוציא תוצאות לא נכונות ואנשים מתעצבנים ורוצים לחזור לשיטה הישנה.

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

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

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