1
00:00:00,025 --> 00:00:05,570
[MUSIC]

2
00:00:05,570 --> 00:00:09,319
في الدورة السابقة على Bootstrap 4،

3
00:00:09,319 --> 00:00:14,613
تعلمنا كيفية الاستفادة من البرامج النصية للآلية الوقائية الوطنية أو Grunt أو

4
00:00:14,613 --> 00:00:21,220
Gulp لإنشاء مجلد التوزيع لتطبيق الويب الخاص بنا.

5
00:00:21,220 --> 00:00:27,040
لذلك رأينا كيف يتم بناء مجلد التوزيع عن طريق أخذ جميع

6
00:00:27,040 --> 00:00:30,270
ملفات HTML و CSS و JavaScript.

7
00:00:30,270 --> 00:00:35,540
ومن ثم القيام بالتعديل، والقبح، والتسلسل،

8
00:00:35,540 --> 00:00:40,490
والتحولات الأخرى المختلفة على هذه لبناء ملفات التوزيع التي يمكن

9
00:00:40,490 --> 00:00:48,470
ببساطة نسخها إلى الخادم ومن ثم جعل موقع الويب الخاص بك متاحًا للمستخدمين.

10
00:00:48,470 --> 00:00:52,050
الآن، ماذا عن تطبيق Angular الخاص بك؟

11
00:00:52,050 --> 00:00:57,240
كيف نقوم بحزم تطبيق Angular الخاص بنا لنشره على موقع ويب؟

12
00:00:57,240 --> 00:01:01,670
الآن كما تدرك أن التطبيق الزاوي الخاص بك سيتم

13
00:01:01,670 --> 00:01:06,630
نشره في نهاية المطاف على موقع ويب من حيث الناس سوف الوصول إلى التطبيق الزاوي الخاص بك،

14
00:01:06,630 --> 00:01:09,350
تحميل التطبيق الزاوي إلى المتصفح ومن

15
00:01:09,350 --> 00:01:13,780
ثم التطبيق الزاوي سوف يأتي إلى الحياة في متصفحاتهم.

16
00:01:14,810 --> 00:01:19,430
سننظر أيضًا في الطريقة الزاوي لاستهداف

17
00:01:19,430 --> 00:01:23,890
الأجهزة المحمولة في الدورتين المقبلتين، في هذا التخصص.

18
00:01:23,890 --> 00:01:27,770
لذلك أنا لا أتحدث تحديدا عن ذلك، في هذه اللحظة.

19
00:01:27,770 --> 00:01:32,180
ولكن هنا نحن نتحدث عن كيفية استهداف نافذة متصفح الويب.

20
00:01:32,180 --> 00:01:35,150
باستخدام رمز التطبيق الزاوي الخاص بك.

21
00:01:35,150 --> 00:01:38,050
إذا وصلنا إلى السؤال عن كيف نقوم بحزم

22
00:01:38,050 --> 00:01:40,090
تطبيق Angular الخاص بنا للنشر؟

23
00:01:40,090 --> 00:01:47,850
الآن يمكننا استخدام مخطوطات Gulp و NPM الكبرى للقيام بذلك، إذا اخترت ذلك.

24
00:01:47,850 --> 00:01:53,290
ولكن هناك طفل جديد على كتلة تسمى webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack كما يمكننا أن نفهم قريبا جدا هو بوندلر وحدة.

26
00:01:59,540 --> 00:02:03,040
الآن، سننظر في بعض التفاصيل في الشريحتين المقبلتين.

27
00:02:03,040 --> 00:02:08,150
لذلك، ما يسمح لك webpack بالقيام به هو حزم تطبيق Angular الخاص بك

28
00:02:08,150 --> 00:02:11,720
بطريقة يسهل نشرها على موقع ويب

29
00:02:11,720 --> 00:02:15,470
وجعل تطبيق Angular الخاص بك متاحًا للمستخدمين.

30
00:02:15,470 --> 00:02:22,070
الآن بما أننا نستخدم Angular CLI لبناء تطبيقنا الزاوي، فإن

31
00:02:22,070 --> 00:02:26,040
Angular CLI يرفع بالفعل من webpack

32
00:02:26,040 --> 00:02:32,010
للقيام ببنائه لمجلد التوزيع لتطبيق Angular الخاص بك.

33
00:02:32,010 --> 00:02:38,780
لذلك لا نحتاج إلى القيام بأي عمل إضافي بشكل صريح للاستفادة من webpack.

34
00:02:38,780 --> 00:02:40,700
مرة واحدة ونحن نستخدم كلي الزاوي.

35
00:02:40,700 --> 00:02:45,870
لأن CLI الزاوي يعتني بجميع الرفع الثقيل نيابة عنا.

36
00:02:45,870 --> 00:02:50,664
لذلك ولكن قبل أن نرى ما هي طريقة CLI Angular لبناء

37
00:02:50,664 --> 00:02:53,022
التوزيع الخاص بك مزيد من السهولة.

38
00:02:53,022 --> 00:02:57,162
نحن بحاجة إلى فهم بعض المفاهيم حول webpack

39
00:02:57,162 --> 00:03:00,566
وكيف يعمل webpack قليلاً من التفاصيل

40
00:03:00,566 --> 00:03:06,270
بحيث عندما ينتج Angular CLI مجلد التوزيع، يمكنك البحث فيه

41
00:03:06,270 --> 00:03:10,410
ورؤية ما يتم بناؤه بالضبط بواسطة Angular CLI.

42
00:03:10,410 --> 00:03:14,150
لذا هدفي من هذه

43
00:03:14,150 --> 00:03:18,950
المحاضرة بالذات هو مجرد إعطائك لمحة موجزة عن webpack.

44
00:03:18,950 --> 00:03:23,770
هذه المحاضرة ليست مقدمة عن كيفية الاستفادة من webpack.

45
00:03:23,770 --> 00:03:26,400
هذا خارج نطاق هذه الدورة، ولكن

46
00:03:26,400 --> 00:03:30,980
إذا كنت مهتمًا، فإن موقع الويب

47
00:03:30,980 --> 00:03:36,280
يحتوي على الكثير من المعلومات حول كيفية استخدام webpack للتطبيقات الأخرى.

48
00:03:36,280 --> 00:03:39,800
يمكنك، من حيث المبدأ، استخدام webpack لحزم

49
00:03:41,350 --> 00:03:44,680
تطبيق Bootstrap الخاص بك الذي قمت بتطويره في الدورة السابقة أيضًا.

50
00:03:46,080 --> 00:03:50,680
ولكن في هذه اللحظة سوف ننظر في كيفية الاستفادة من webpack

51
00:03:51,840 --> 00:03:57,640
كجزء من طريقة CLI الزاوي لبناء تفسيرنا الزاوي.

52
00:03:59,640 --> 00:04:02,890
لذا من الواضح أن السؤال الأول الذي يطرح نفسه في عقلك هو،

53
00:04:02,890 --> 00:04:04,410
ما هو webpack بالضبط؟

54
00:04:04,410 --> 00:04:06,150
ما الذي نتحدث عنه؟

55
00:04:06,150 --> 00:04:12,850
Webpack، هذا هو التعريف من وثائق webpack نفسها.

56
00:04:12,850 --> 00:04:19,130
وتقول webpack هو وحدة تجميع لتطبيقات جافا سكريبت الحديثة.

57
00:04:19,130 --> 00:04:21,723
تطبيق Angular الخاص بك الذي كنت تعمل عليه حتى

58
00:04:21,723 --> 00:04:24,530
الآن هو تطبيق جافا سكريبت حديث سهل.

59
00:04:24,530 --> 00:04:29,590
الآن أنت تعمل جميعًا مع أحدث التقنيات في تقنية Angular.

60
00:04:29,590 --> 00:04:35,170
وهكذا، من الواضح أنه يؤهل كتطبيق جافا سكريبت حديث

61
00:04:35,170 --> 00:04:38,570
، وبالتالي، فإن استخدام webpack منطقي تمامًا.

62
00:04:38,570 --> 00:04:40,980
الآن ما هو أفضل webpack هو،

63
00:04:40,980 --> 00:04:45,720
فإنه ينظر إلى بنية كاملة من تطبيق Angular الخاص بك.

64
00:04:45,720 --> 00:04:50,610
لذلك فإنه يعبر بشكل متكرر من خلال التعليمات البرمجية الخاصة بك من

65
00:04:50,610 --> 00:04:54,980
تطبيق Angular الخاص بك تبحث لمعرفة أفضل طريقة لتجميع

66
00:04:54,980 --> 00:05:00,680
المعلومات إلى ما يسمى حزم.

67
00:05:00,680 --> 00:05:05,947
عندما ينظر webpack إلى شفرتك، فإنه يعامل كل ملف

68
00:05:05,947 --> 00:05:12,735
لديك داخل تطبيق Angular الخاص بك، سواء كان جافا سكريبت من ملف Typescript،

69
00:05:12,735 --> 00:05:17,319
سواء كان ملف CSS، سواء كان ملف SAS، سواء كان ملف صورة.

70
00:05:17,319 --> 00:05:21,781
أيا كان, فإنه يعامل كل واحد منهم كوحدات من منظوره

71
00:05:21,781 --> 00:05:25,438
, ومن ثم يقرر, ما هي أفضل طريقة لتغليف هذه

72
00:05:25,438 --> 00:05:30,790
الوحدات في ما يسمى حزم التي يمكن تحميلها من.

73
00:05:30,790 --> 00:05:36,060
الخادم إلى متصفح الويب الخاص بك بطريقة مريحة ومريحة.

74
00:05:37,350 --> 00:05:42,820
لذلك عندما نتحدث عن webpack، من الواضح أننا بحاجة إلى توضيح ما تعنيه الحزمة.

75
00:05:42,820 --> 00:05:47,315
كما ذكرت بإيجاز في الشريحة السابقة، فإن الحزمة ليست سوى

76
00:05:47,315 --> 00:05:51,155
ملف جافا سكريبت يتضمن الأصول.

77
00:05:51,155 --> 00:05:56,130
الآن، عليك أن تضع هذا في الاعتبار أن webpack يعامل كل شيء على أنه JavaScript.

78
00:05:56,130 --> 00:06:02,410
سواء كان CSS أو أي من أنواع الملفات الأخرى،

79
00:06:02,410 --> 00:06:05,930
سيتم التعامل معها أيضًا على أنها JavaScript من منظور webpack.

80
00:06:05,930 --> 00:06:10,790
الآن لا تشعر بالقلق الشديد، يعرف webpack كيفية حزمها

81
00:06:10,790 --> 00:06:15,470
ومعاملتها كحزم JavaScript حيث تقوم بإعداد تلك الحزم.

82
00:06:15,470 --> 00:06:19,740
أو وحدات جافا سكريبت حيث تقوم بإعداد تلك الحزم.

83
00:06:19,740 --> 00:06:26,290
لذا فإن الحزمة هي شيء يجمع معا الوحدات التي تنتمي إلى بعضها البعض.

84
00:06:26,290 --> 00:06:29,010
عندما أتحدث عن الوحدة النمطية، فأنا لا أشير إلى وحدة Angular،

85
00:06:29,010 --> 00:06:30,690
فأنا لا أشير إلى وحدة JavaScript.

86
00:06:32,220 --> 00:06:36,170
كما قلت و Webpack، يتم إنشاء كل ملف كوحدة نمطية.

87
00:06:36,170 --> 00:06:40,820
وهكذا فإنه يجمع هذه الوحدات معا،

88
00:06:40,820 --> 00:06:46,160
التي ينبغي أن تقدم إلى العميل في استجابة واحدة لطلب.

89
00:06:47,200 --> 00:06:51,740
لذا فإن webpack نفسه يتخذ قرارًا بشأن قول

90
00:06:51,740 --> 00:06:55,070
الأجزاء التي يجب ضمها معًا في حزمة.

91
00:06:55,070 --> 00:06:59,000
وينبغي أن يتم تسليمها معا بحيث

92
00:06:59,000 --> 00:07:04,120
يتم تقديم تطبيق الويب الخاص بك بطريقة أكثر فعالية.

93
00:07:04,120 --> 00:07:09,190
الآن، لقد بنيت Angular CLI بالفعل تكوينه لأفضل طريقة لحزم

94
00:07:09,190 --> 00:07:17,370
الأصول الزاوي، بحيث يتم تسليمها بشكل ملائم إلى المتصفح.

95
00:07:17,370 --> 00:07:21,550
لذلك لا داعي للقلق حول كيفية القيام بذلك بأنفسنا،

96
00:07:21,550 --> 00:07:25,490
سنتركها لمنطق CLI الزاوي لرعاية كل هذا التكوين

97
00:07:25,490 --> 00:07:29,540
لكيفية بناء هذه الحزمة حزم نيابة عنا.

98
00:07:29,540 --> 00:07:33,190
لذا ما يفعله Webpack هو أنه يبدأ في أعلى مستوى.

99
00:07:33,190 --> 00:07:38,450
في التطبيق الزاوي الخاص بك، المستوى الأعلى هو ملفات index.html و main.js،

100
00:07:38,450 --> 00:07:43,930
كما تعلمنا في الدرس الأول من هذه الدورة.

101
00:07:43,930 --> 00:07:49,170
لذلك يبدأ هناك، وبعد ذلك يتبع كل المدخلات

102
00:07:49,170 --> 00:07:54,630
التي تستخدمها في تلك أسفل المسار

103
00:07:54,630 --> 00:08:00,760
ويظهر تنظيم هرمي لجميع الأجزاء المختلفة.

104
00:08:00,760 --> 00:08:06,110
لذلك يتم بناء ما يسمى الرسم البياني التبعية بواسطة webpack.

105
00:08:06,110 --> 00:08:10,840
الآن باستخدام هذا الرسم البياني التبعية، يقرر Webpack كيفية

106
00:08:10,840 --> 00:08:15,810
حزم حزمها وأن الصور حزمة واحدة أو أكثر لأنها

107
00:08:15,810 --> 00:08:21,630
منطقية للتطبيق الخاص بك أن webpack هو حزمة.

108
00:08:21,630 --> 00:08:27,690
وفي عملية القيام بذلك، عندما يتم التعامل مع ملفات غير جافا سكريبت،

109
00:08:27,690 --> 00:08:34,440
مثل CSS، HTML و SAS أو الصور وهلم جرا.

110
00:08:34,440 --> 00:08:38,240
ثم يستخدم المكونات الإضافية التي تمكنك من المعالجة المسبقة

111
00:08:38,240 --> 00:08:41,910
وتعديل تلك الملفات، تلك الملفات غير جافا سكريبت،

112
00:08:41,910 --> 00:08:46,970
إلى طريقة يمكن تجميعها في حزم webpack الخاصة بك.

113
00:08:49,082 --> 00:08:52,070
إذا كنت تستخدم webpack من الصفر،

114
00:08:52,070 --> 00:08:57,510
فستصف بعض التكوين الخاص بك لـ webpack للعمل.

115
00:08:57,510 --> 00:09:00,775
على هذه الملفات في ملف باسم

116
00:09:00,775 --> 00:09:06,810
webpack.config.js الذي قمنا بتضمينه في المجلد الجذر للتطبيق الخاص بك.

117
00:09:06,810 --> 00:09:11,640
في حالتنا نظرًا لأننا نعتمد على Angular CLI للقيام بذلك نيابة عنا،

118
00:09:11,640 --> 00:09:16,470
ينقر Angular CLI تلقائيًا هنا في بناء التكوين الخاص

119
00:09:16,470 --> 00:09:18,300
بـ webpack للعمل معه.

120
00:09:18,300 --> 00:09:23,260
الآن عندما نتحدث عن webpack، هناك أربعة مفاهيم مهمة بالنسبة

121
00:09:23,260 --> 00:09:26,660
لنا لفهم كيفية عمل webpack على بلدان جزر المحيط الهادئ.

122
00:09:26,660 --> 00:09:28,740
أول واحد هو الدخول.

123
00:09:28,740 --> 00:09:33,560
الإدخال هو النقطة التي يجب أن يبدأ فيها webpack

124
00:09:33,560 --> 00:09:36,350
ويتابعه لإنشاء الرسم البياني التبعية.

125
00:09:36,350 --> 00:09:40,260
لذلك، ملف.ts الرئيسي على سبيل المثال، هو نقطة دخول.

126
00:09:40,260 --> 00:09:44,490
حتى webpack يمكن أن تبدأ انها مطاردة في بناء الرسم البياني التبعية.

127
00:09:44,490 --> 00:09:50,860
الحق في main.ts ثم انتقل مطاردة بعد كل بيانات الاستيراد من هناك

128
00:09:50,860 --> 00:09:56,160
إلى ملفاتهم الأخرى ومن ثم من هناك يستوردون تلك الملفات

129
00:09:56,160 --> 00:10:01,490
وهلم جرا على طول الطريق حتى يبني الرسم البياني التبعية.

130
00:10:02,930 --> 00:10:06,660
الآن، الجزء الثاني هو ما يمكن أن نسميه كما الإخراج.

131
00:10:06,660 --> 00:10:11,200
في webpack، يكون الإخراج عبارة عن مجموعة الحزم التي تعدها webpack

132
00:10:11,200 --> 00:10:11,740
نيابة عنك.

133
00:10:12,890 --> 00:10:15,590
والثالث هو لوادر.

134
00:10:15,590 --> 00:10:18,950
الآن webpack كما قلت يفهم جافا سكريبت فقط

135
00:10:18,950 --> 00:10:21,540
ويعرف فقط كيفية العمل مع جافا سكريبت.

136
00:10:21,540 --> 00:10:26,250
ولكن كما ذكرت أيضا، يعامل webpack كل ملف كوحدة نمطية.

137
00:10:26,250 --> 00:10:31,660
لذلك تلك الملفات التي ليست جافا سكريبت يجب أن يتم

138
00:10:31,660 --> 00:10:36,870
تحويلها ثم وضعها في حزم الخاصة بك باستخدام

139
00:10:36,870 --> 00:10:42,300
التحويلات المناسبة ومن ثم سيتم إضافتها إلى الرسم البياني التبعية الخاص بك.

140
00:10:42,300 --> 00:10:45,420
هذا هو المكان الذي يأتي فيه استخدام المكونات الإضافية المختلفة.

141
00:10:45,420 --> 00:10:47,320
ماذا تساعدك المكونات الإضافية على القيام به؟

142
00:10:47,320 --> 00:10:51,920
تساعدك المكونات الإضافية على تنفيذ الإجراءات المختلفة والوظائف المخصصة

143
00:10:51,920 --> 00:10:58,020
أو التجميعات التي تحتاج إلى القيام بها لبناء الحزم الخاصة بك.

144
00:10:58,020 --> 00:11:02,820
لذلك سوف تساعدك على تحويل CSS الخاص بك إلى طريقة يمكنني

145
00:11:02,820 --> 00:11:06,830
حزمها في حزم جافا سكريبت الخاصة بك، وهلم جرا.

146
00:11:06,830 --> 00:11:12,570
لذلك هذا هو مقدمة سريعة لكيفية عمل webpack بالفعل.

147
00:11:12,570 --> 00:11:17,420
الآن مع هذه المقدمة السريعة، في التمرين التالي

148
00:11:17,420 --> 00:11:22,750
سترى أننا سنستفيد بشكل ملائم من أمر يسمى ng

149
00:11:22,750 --> 00:11:28,360
build لبناء مجلد التوزيع الخاص بنا لتطبيق Angular الخاص بنا.

150
00:11:28,360 --> 00:11:31,690
يسمح لك بناء Ng ببناء إصدار تطوير أو

151
00:11:33,380 --> 00:11:36,440
إصدار إنتاج من تطبيق Angular الخاص بك.

152
00:11:36,440 --> 00:11:38,790
عندما استخدمنا تصفح ng،

153
00:11:38,790 --> 00:11:43,270
كان CLI Angular يستخدم بالفعل webpack لحزم الأشياء.

154
00:11:43,270 --> 00:11:44,350
لذلك إذا عدت

155
00:11:44,350 --> 00:11:50,630
ونظرت إلى جميع الأشياء التي تم طباعتها في نافذة المحطة الطرفية الخاصة بك،

156
00:11:50,630 --> 00:11:55,910
فستبدأ في رؤية webpack تعمل خلف الكواليس للقيام بالحزم.

157
00:11:57,070 --> 00:12:01,760
الآن في التمرين التالي، ستقوم بإنشاء مجلد التوزيع الخاص بهم،

158
00:12:01,760 --> 00:12:08,840
والذي يمكن بعد ذلك نسخه إلى موقع الويب الخاص بك ثم نشر تطبيق Angular الخاص بك.

159
00:12:08,840 --> 00:12:12,020
الآن لقد قمت بالفعل ببناء واحد

160
00:12:12,020 --> 00:12:15,570
من تطبيق Angular الذي قمنا ببنائه حتى الآن.

161
00:12:15,570 --> 00:12:20,380
لذلك، دعونا نذهب ونلقي نظرة سريعة على مجلد التوزيع لمعرفة ما هو

162
00:12:20,380 --> 00:12:24,370
هناك قبل أن تفعل فعلا التمرين.

163
00:12:24,370 --> 00:12:28,520
لذلك بمجرد إكمال التمرين، أنصحك بشدة بالذهاب

164
00:12:28,520 --> 00:12:36,140
والنظر إلى مجلد القرص الذي تم إنشاؤه في مجلد مشروع تطبيقات Angular الخاص بك.

165
00:12:36,140 --> 00:12:40,940
ثم انظر وانظر بالضبط الملفات التي سأريك إياها الآن

166
00:12:40,940 --> 00:12:44,020
الحق في مجلد التوزيع.

167
00:12:44,020 --> 00:12:50,890
الذهاب إلى تطبيق الزاوي لدينا في فيسوال ستوديو هنا،

168
00:12:50,890 --> 00:12:53,950
ترى أنني الآن فتح مجلد التوزيع.

169
00:12:53,950 --> 00:12:58,260
وداخل مجلد التوزيع سترى مجموعة كاملة من الملفات هنا.

170
00:12:58,260 --> 00:13:03,905
سترى ملفًا باسم سلسلة طويلة حيث

171
00:13:03,905 --> 00:13:09,890
.bundle.js من معرفتك بـ Gulp و Grunt من الدورة السابقة،

172
00:13:09,890 --> 00:13:14,620
ستبدأ في معرفة ما تعنيه هذه السلسلة الطويلة المتوسطة.

173
00:13:14,620 --> 00:13:19,830
هذه هي الطريقة التي تضيف بها هذا الإصدار إلى التطبيق الخاص بك.

174
00:13:19,830 --> 00:13:25,310
وبالمثل، ترى ملفًا آخر يسمى styles.something.css.

175
00:13:25,310 --> 00:13:28,834
ثم ترى بائع.bundle.js.

176
00:13:28,834 --> 00:13:31,319
ثم polyfills.js.

177
00:13:31,319 --> 00:13:34,300
ثم لديك ملف index.html،

178
00:13:34,300 --> 00:13:37,350
وكنت أتساءل ما حدث لجميع التعليمات البرمجية هتمل الخاص بك؟

179
00:13:37,350 --> 00:13:39,970
انها في واحدة من تلك الحزم هناك، حسنا.

180
00:13:39,970 --> 00:13:43,610
لذا فإن جميع القوالب التي كتبتها موجودة في واحدة من تلك الحزم،

181
00:13:43,610 --> 00:13:45,670
باستثناء صفحة index.html.

182
00:13:45,670 --> 00:13:51,206
تحتاج إلى صفحة index.html بشكل صريح لأنه

183
00:13:51,206 --> 00:13:54,348
عندما يقوم مستخدم بكتابة عنوان URL

184
00:13:54,348 --> 00:13:59,024
لموقع الويب الخاص بك في شريط عناوين المتصفح.

185
00:13:59,024 --> 00:14:01,624
ثم تهبط في موقع الويب الخاص بك

186
00:14:01,624 --> 00:14:05,362
وصفحات HTML نقطة الفهرس حيث تبدأ كل شيء

187
00:14:05,362 --> 00:14:11,400
وتحتاج إلى ذلك لتمهيد تطبيق Angular الخاص بك وهذا هو السبب في وجود ذلك.

188
00:14:11,400 --> 00:14:16,170
ثم ترى أيضا ملفات فونتاويسوم هناك التي هي ضرورية

189
00:14:16,170 --> 00:14:21,340
وأنه داخل الأصول ترى بعض الصور هناك، في مجلد الأصول.

190
00:14:22,530 --> 00:14:28,980
حتى إلقاء نظرة سريعة على الملف الرئيسي، سترى أن هذا هو

191
00:14:28,980 --> 00:14:35,185
كما ترون هو العديد من الملفات مضغوطة سلسلة مجموعة من الملفات.

192
00:14:35,185 --> 00:14:40,025
الآن، إذا حاولت قراءة ذلك، لن يكون الأمر سهلاً،

193
00:14:40,025 --> 00:14:42,455
إنه ملف ضخم يحتوي على الكثير من الأشياء.

194
00:14:42,455 --> 00:14:46,695
ويشمل هذا أيضًا جميع كود الأطر الزاوي،

195
00:14:46,695 --> 00:14:49,140
وهو يد شفرتك التي كتبتها.

196
00:14:49,140 --> 00:14:53,980
والرمز الذي يأتي من مادة الزاوي، فليكس-لايوت

197
00:14:53,980 --> 00:14:58,460
وكل شيء آخر قمت بتضمينه مع التطبيق الزاوي الخاص بك.

198
00:14:58,460 --> 00:15:02,480
وبالمثل، لديك polyfills ثم الأنماط

199
00:15:02,480 --> 00:15:07,130
وتبدأ في رؤية أن جميع الأشياء التي تستخدمها داخل

200
00:15:07,130 --> 00:15:10,870
تطبيق Angular الخاص بك قد تم تجميعها معًا في هذه الملفات هناك.

201
00:15:12,270 --> 00:15:17,220
لذلك مع هذا آمل أن تحصل على نظرة عامة سريعة على webpack.

202
00:15:17,220 --> 00:15:21,100
الآن حان الوقت بالنسبة لنا للذهاب إلى التمرين، حيث سنقوم ببساطة باستخدام

203
00:15:21,100 --> 00:15:26,660
أمر بناء Angular CLI ng لبناء مجلد التوزيع هذا.

204
00:15:26,660 --> 00:15:30,810
وسترى كيف يمكنك نشر تطبيق Angular الخاص بك على موقع ويب.

205
00:15:31,870 --> 00:15:37,329
مباشرة بعد إكمال البناء.

206
00:15:37,329 --> 00:15:39,969
[ موسيقى]