לרוב היום, בהרבה מהממשקים שנבנה ,אפשר להבחין באיזה קובץ כזה שנקרא webpack . לא הרבה יודעים מה הוא עושה ואיך להשתמש בו. ואם יצא לכם לפתוח את הקובץ ואין לכם ממש מושג מה זה webpack ואיך משתמשים בו יכול להיות שזה נראה קובץ מעט מפחיד.
אז אם תרצו להכיר קצת וובפאק בשביל לא לפחד ממנו, הפוסט הזה בשבילכם.
מה בפוסט :
- מה זה webpack
- איך משתמשים ב webpack
- שימושים נפוצים בתעשיה
1.מי אתה webpack
וובפאק לוקח אוסף של קבצים (מודולים) וממיר אותם לקובץ אחד (או מספר קבצים תלוי בקונפיגורציה שתגדירו), וובפאק יקווץ את הקבצים השונים לסורס אחד מוכן לפעולה. וובפאק דואג לנהל את הdependencies כך שהקוד ירוץ ללא בעיות. אם ניכנס קצת יותר לעומק של וובפאק, אפשר לעשות המון שימושים סביב היכולות של וובפאק, למשל:
ניהול קבצי תמונה, קבצי סטיילינג כגון scss ,css , פונטים ועוד.. וזה נעשה בעזרת loaders
כמו כן שימושים רבים בוובפאק תמצאו בהמון סביבות או ספריות נפוצות כמו ריאקט , אנגולר, וויו ואחרים..
שימוש קלסאי שאולי חלקכם ראיתם הוא בסגנון הבא:
לפני שימוש בוובפאק ככל הנראה תצטרכו לטעון קבצים רבים ולשמור על סדר הטעינה שלהם וזה נראה כך:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
...
</head>
<body>
...
<script src="app.js"></script>
<script src="doSometing.js"></script>
<script src="doSometingOne.js"></script>
<script src="doSometingTwo.js"></script>
<script src="doSometingThree.js"></script>
</body>
</html>לאחר שימוש בוובפאק תקבלו סורס אחד . וזה יראה כך:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
...
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>2.איך משתמשים בwebpack
אציג פה דוגמה בסיסית כיצד משתמשים. בשביל להתחיל ולעבוד עם webpack צריך לעשות כמה פעולות פשוטות והן:
- תפתחו פרויקט חדש ותריצו
npm init - התקינו webpack . יש להתקין 2 ספריות webpack webpack-cli :
npm install webpack webpack-cli - צרו קובץ (בסמוך לpackage.json) שנקרא :
webpack.config.js
עכשיו נוכל לעשות כל מיני שימושים נפוצים בעזרת וובפאק שככל הנראה יעזרו לכם מאד בעבודה מכוון שהמון פרויקטים בתעשייה (פרונט אנד) מממשים וובפאק.
Entry and Output
בשביל שוובפאק יוכל לעשות את עבודתו הוא מבקש מאיתנו שנגדיר לו נקודת כניסה entry point ונקודת יציאה end Point: output:
module.exports = {
entry: "./app/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
}
};אפשר לראות בדוגמה שנקודת הכניסה פשוטה להגדרה אך נקודת היציאה היא אובייקטי , המקבל path כלומר איפה תרצו למקם את הקבצים שוובפאק מייצר, אז dirname__ בוחר את המיקום של הקובץ הנוכחי דייהנו התיקיה הראשית, ושמה הוא יפתח תיקיה חדשה בשם שתבחרו, הקונבנציה הקלאסית היא dist
נגדיר את זה כך:
Loaders, Rules, Plugins, Mode
בתוך וובפאק ניתן להגדיר המון דברים שיעזרו לכם לבנות קובץ מוגמר לפרודקשן. אציג פה כמה מהשימושים היותר נפוצים וכן אם תרצו לקרוא על שימושים נוספים אפשר לגשת לאתר של וובפאק ולראות עוד המון אפשרויות שונות . וובפאק עשו עבודה טובה וחשבו על כל מקרה אפשרי.
module.exports = {
entry: "./app/index.js",
module: {
rules:[
{test: /\.svg$/, loader: 'svg-inline-loader'},
{test: /\.scc$/, use: ['style-loader', 'css-loader']},
{test: /\.(js)$/, use: 'babel-loader'},
]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
};Rules & Loaders
שימוש ב loaders דורש להתקינם לפני הכל. בשביל לממש את הדוגמה נצטרך להתקין את הלואדרים הבאים כך:
npm install svg-inline-loader --save-dev npm install style-loader --save-dev npm install css-loader --save-dev npm install babel-loader @babel/core @babel/preset-env --save-dev
אם האפליקציה שלכם מכילה קבצי SVG , CSS , JS babel וחשוב לכם שוובפאק יטפל בהם. יהיה עליכם להגדיר rules עבורם. כמו כן יהיה עלכם להתקין loaders. שידעו לטפל בקבצים אלו. בתוך המערך של הrules יהיה עליכם להוסיף אובייקט שיכול להכיל ערכים שונים, הנפוצים ביותר הם:
- test – שמקבל ערך regex שיודע לחפש את כל הקבצים מהסוג הספציפי.
- use\loader – שם של הloader שהתקנתם . use יותר נפוץ וכן יכול לקבל גם מערך של loaders – בדוגמה שמתי שימוש בשניהם אבל מומלץ לשמור על אחידות . לרוב משתמשים בuse.
Plugins
פלאגינים בוובפאק הם למעשה השלד של וובפאק , וובפאק בעצמו מושטת על מבנה פלאגיני דומה לשימוש שעושים בקובץ הקניגורציה כאן. פלאגינים עושים שימוש לאחר הקופילציה של וובפאק ויש המון שימושים שעושים עם פלאגינים. אציג פה דוגמה אחת נפוצה
npm install –save-dev html-webpack-plugin
הפלאגין הזה יגנרט עבורכם את הhtml ויכלול את הקובץ (או הקבצים) שיוצרו בעזרת וובפאק. השימוש הוא מאוד פשוט. אפשר לראות בדוגמה:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./app/index.js",
module: {
rules:[
{test: /\.svg$/, loader: 'svg-inline-loader'},
{test: /\.scc$/, use: ['style-loader', 'css-loader']},
{test: /\.(js)$/, use: 'babel-loader'},
]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
plugins: [new HtmlWebpackPlugin()],
};Mode
מוד מאפשר לנו להגדיר סביבות שונות בעזרת וובפאק. למשל סביבת development וסביבת production
בשביל להוסיף סביבה יהיה עלינו גם להגדיר בקובץ package כמה דברים .נתחיל בקובץ הוובפאק
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: "./app/index.js",
module: {
rules:[
{test: /\.svg$/, loader: 'svg-inline-loader'},
{test: /\.scc$/, use: ['style-loader', 'css-loader']},
{test: /\.(js)$/, use: 'babel-loader'},
]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
plugins: [new HtmlWebpackPlugin()],
mode: process.env.NODE_ENV === "production" ? "production" : "development"
};לאחר שהגדרנו את הסביבה בקובץ הוובפאק יהיה עלינו לשנות בpackage כמה ההסקריפטים .
נגדי כעת את הפקודות השונות בהרצת הפרויקט והבדלה בין הסביבות כך שנרצה להריץ את הפרויקט בסביבת הפיתוח נבחר להריץ npm run start ובסביבת הייצור נריץ npm run build. לפני שניגש לקובץ הpackage נרצה להתקין את :
npm install webpack-dev-server --save-dev
שייקל עלינו בעבודה עם סביבת הפיתוח. ב localhost:8080
להלן קובץ ה package.json :
{
"name": "hitesh_choudhary_crash_course",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "SET NODE_ENV='production'& webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^2.0.0",
"svg-inline-loader": "^0.8.2",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
וסיימנו! . למעשה עוד לא סיימנו. זוכרים את נקודת הכניסה? יהיה עלינו לייצר תיהיה בשם app ולייצר בה קובץ index.js שממנו הכל מתחיל.
להלן תמונה של הקבצים שלי , אפשר לראות שיש לי תיקיה של app אם קובץ index.js יצרתי עוד קובץ נוסף שעוד מעט אראה לכם סתם לדוגמה בשביל לוודא שוובפאק עושה את עבודותו נאמנה.
הקבצים שיצרתי לצורך הדוגמה הם:
export const hello ="hello";
import {hello} from './somejscode.js';
const welcome = `${hello} Codcodile`;
console.log(welcome);אחרי שיצרתי את הקבצים הללו הרצתי את הפקודה של npm run build ולמעשה קיבלתי קצבים מג'ונרטים בתיקיה dist. את תיקיה dist ככה שקיבלתם אפשר לעלות לפרודקשן.
3. שימושים נפוצים בתעשיה
מפתחים חדשים ואפילו וותיקים לא תמיד מייחסים חשיבות להבנה ולמידה של webpack אך למעשה הוא שימושי מאד. למרות שהוא בחלק גדול מהמקרים "מאחורי הקלעים" בפרויקטים שלכם ואין לכם צורך להתעסק איתו. עדיין לא רחוק היום שתדרשו לערוך אותו, להוסיף רולים או פלאגינים. לכן ממליץ בחום לקחת את זה לתשומת לבכם.
בהצלחה! 🐱🐉
