תחילת העבודה עם Webpack [עם דוגמה לפרוייקט]

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

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

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

לעומת הרצים לעומת

אז, איך Webpack מחסנית למעלה לעומת כלי בנייה אחרים כגון Grunt, Gulp או Browserify?

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

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

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

אם אתה רוצה לדעת יותר על איך Webpack בהשוואה כלי בנייה אחרים, אני ממליץ לך שני מאמרים:

1. אנדרו ריי Webpack: מתי להשתמש ומדוע על הבלוג שלו
2. של קורי לעומת on freeCodeCamp (עם איורים מדהימים)

שני האיורים לעיל הם מתוך חומרים Webpack של המדריך Pro React, עוד משאב זה שווה מבט.

ארבעה מושגי ליבה של Webpack

Webpack יש ארבע אפשרויות תצורה עיקריות “מושגי ליבה” כי תצטרך להגדיר בתהליך הפיתוח:

1. כניסה - ה נקודת התחלה של גרף התלות (קובץ JavaScript אחד או יותר).
2. פלט - את הקובץ שבו אתה רוצה את פלט להיות ארוז (קובץ JavaScript אחד).
3. מעמיסים - טרנספורמציות על הנכסים להפוך אותם מודולים Webpack כך שהם יכולים להיות נוסף לתרשים התלות. לדוגמה, css-loader משמש לייבוא ​​קבצי CSS.
4. תוספים - פעולות מותאמות אישית ופונקציונליות המבוצעת על הצרור. לדוגמה, i18n-webpack-plugin מטביע לוקליזציה לתוך הצרור.

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

התקן את Webpack

ל להתקין את, פתח את שורת הפקודה, נווט לתיקיית הפרוייקט שלך והפעל את הפקודה הבאה:

 npm 

אם אתה לא רוצה לעשות את התצורה בעצמך, אתה יכול לעשות npm לאכלס את חבילה קובץ עם ערכי ברירת המחדל עם הפקודה הבאה:

 npm init-i 

לאחר מכן, התקן את Webpack:

 להתקין 

אם השתמשת ערכי ברירת המחדל זה איך שלך חבילה הקובץ צריך להיראות כמו עכשיו (המאפיינים יכולים להיות בסדר שונה):

 "name": "test", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" "^ 3.6.0", "scripts": "test": "echo \" שגיאה: לא צוין מבחן \ "&& exit 1", "מילות מפתח ": []," author ":" "," license ":" ISC " 

צור את קובץ התצורה

אתה צריך ליצור webpack.config.js קובץ בתיקיית השורש של הפרויקט. קובץ תצורה זה יש תפקיד מרכזי, שכן זה המקום שבו אתה להגדיר את ארבעת מושגי הליבה (נקודות כניסה, פלט, מעמיסים, תוספים).

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

1. צור את נקודות הכניסה (ים)

אתה יכול לקבל נקודת כניסה אחת או יותר. אתה צריך להגדיר אותם כניסה נכס.

הכנס את קטע הקוד הבא אל webpack.config.js קובץ. זה מציין נקודת כניסה אחתYou

 module.exports = entry: "./srcc/script.js"; 

כדי לציין יותר מנקודות כניסה שבהן ניתן להשתמש או במערך או בתחביר האובייקט.

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

 "שלום, אני מתחיל פרויקט Webpack Starter." document.write (ברכה); 

.2 הגדר את הפלט

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

 const path = דורש ("נתיב"); module.exports = entry: "./sscc/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'); 

ה שם קובץ הנכס מגדיר את שם הקובץ המצורף, בזמן ש נתיב נכס מציין את שם הספריה. הדוגמה שלמעלה תיצור את /dist/bundle.js קובץ.

למרות שזה לא חובה, עדיף להשתמש ב path.resolve () שיטה כאשר אתה מגדיר את נתיב רכוש, כפי שהוא מבטיח רזולוציה מודול מדויק (הנתיב המוחלט של הפלט נוצר על פי כללים שונים בסביבות שונות, רזולוציית המודול פותר פער זה). אם אתה משתמש נתיב, אתה צריך דורשים ה נתיב מודול הצומת בחלק העליון של webpack.config.js קובץ.

.3 הוסיפו את המעמיסים

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

 const path = דורש ("נתיב"); module.exports = entry: "./sscc/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: rules: [test : / /\.js$/, excludive: / (node_modules | bower_components) /, use: loader: "babel-loader", options: presets: ["env"]; 

תצורה אולי נראה קשה אבל זה רק להעתיק- pasted מ תיעוד מטעין בבל. רוב המעמיסים מגיעים עם קובץ readme או איזשהו תיעוד, כך שאתה (כמעט) תמיד יודע איך להגדיר אותם כראוי. וכן, את המסמכים Webpack יש גם דף זה מסביר כיצד להגדיר module.rules.

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

 npm להתקין - save-dev בייבל-מטעין Babel הליבה- Babel מראש מראש 

אם יש לך להסתכל על שלך חבילה הקובץ, תראה את זה npm הוסיף שלוש חבילות הקשורות בבל תלות נכס, אלה יטפל האוסף ES6.

4. הוסף את plugins

ל הוסף את התוספים, אתה צריך לציין את תוספים נכס. בנוסף, אתה גם צריך דורשים את אחד plugins אחד, כפי שהם מודולים חיצוניים.

בדוגמה שלנו, אנו מוסיפים שני plugins Webpack: HTML Webpack plugin וה טען מראש את תוסף. Webpack יש תוסף נחמד המערכת האקולוגית, אתה יכול לגלוש ברשימה המלאה כאן.

כדי לדרוש את plugins כמו מודולים הצומת, ליצור שני קבועים חדשיםYou HtmlWebpackPlugin ו PreloadWebpackPlugin ו להשתמש ב דרוש () פונקציה.

 const path = דורש ("נתיב"); const HtmlWebpackPlugin = דורשים ("html-webpack-plugin"); const PreloadWebpackPlugin = דרוש ("preload-webpack-plugin"); module.exports = entry: "./sscc/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: rules: [test : / /\.js$/, excludive: / (node_modules | bower_components) /, use: loader: "babel-loader", options: presets: ["env"], תוספים: [New HtmlWebpackPlugin (), חדש PreloadWebpackPlugin ()]; 

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

 npm להתקין html-webpack-plugin - save-dev npm להתקין - save-dev preload-webpack-plugin 

אם תבדוק את חבילה עכשיו, תראה את זה npm הוסיף את שני plugins ל תלות נכס.

הפעל את

ל ליצור את עץ התלות ו פלט את הצרור, הפעל את הפקודה הבאה בשורת הפקודה:

 webpack 

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

אם הכל הלך ישר Webpack יצר א Dist תיקייה בשורש הפרויקט שלך הניח את שני קבצים ארוזים (bundle.js ו index.html) בתוך זה.

ג 'יטו ריפו

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