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

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

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

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

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

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

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

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

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