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

2
00:00:05,570 --> 00:00:09,319
Dans le cours précédent sur Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
, nous avons appris à utiliser soit les scripts NPM, soit Grunt ou

4
00:00:14,613 --> 00:00:21,220
Gulp pour construire le dossier de distribution pour notre application web.

5
00:00:21,220 --> 00:00:27,040
Nous avons donc vu comment le dossier de distribution est construit en prenant tous les fichiers HTML,

6
00:00:27,040 --> 00:00:30,270
CSS et JavaScript.

7
00:00:30,270 --> 00:00:35,540
Et puis en faisant la modification, l'uglification, la concaténation,

8
00:00:35,540 --> 00:00:40,490
et diverses autres transformations sur ceux-ci pour construire des fichiers de distribution qui peuvent être

9
00:00:40,490 --> 00:00:48,470
simplement copiés sur le serveur, puis rendre votre site web disponible pour les utilisateurs.

10
00:00:48,470 --> 00:00:52,050
Maintenant, qu'en est-il de votre application Angular ?

11
00:00:52,050 --> 00:00:57,240
Comment emballer notre application Angular pour la déployer sur un site Web ?

12
00:00:57,240 --> 00:01:01,670
Maintenant que vous réalisez que votre application angulaire va également finalement être

13
00:01:01,670 --> 00:01:06,630
déployée sur un site Web à partir duquel les gens accèderont à votre application Angular,

14
00:01:06,630 --> 00:01:09,350
téléchargez l'application Angular sur le navigateur et

15
00:01:09,350 --> 00:01:13,780
alors leur application angulaire prendra vie dans leurs navigateurs.

16
00:01:14,810 --> 00:01:19,430
Nous examinerons également la façon angulaire de cibler les appareils mobiles

17
00:01:19,430 --> 00:01:23,890
dans les deux prochains cours, dans cette spécialisation.

18
00:01:23,890 --> 00:01:27,770
Donc, je ne parle pas spécifiquement de cela, en ce moment.

19
00:01:27,770 --> 00:01:32,180
Mais ici, nous parlons de la façon de cibler une fenêtre de navigateur Web.

20
00:01:32,180 --> 00:01:35,150
En utilisant votre code d'application Angular.

21
00:01:35,150 --> 00:01:38,050
Alors en arrivant à la question de savoir comment emballer notre application Angular

22
00:01:38,050 --> 00:01:40,090
pour le déploiement ?

23
00:01:40,090 --> 00:01:47,850
Maintenant, nous pourrions utiliser les scripts Gulp et NPM pour le faire, si vous le souhaitez.

24
00:01:47,850 --> 00:01:53,290
Mais il y a un nouveau gamin sur le bloc appelé webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack comme nous le comprendrions très bientôt est un module bundler.

26
00:01:59,540 --> 00:02:03,040
Maintenant, nous allons regarder quelques détails dans les prochaines diapositives.

27
00:02:03,040 --> 00:02:08,150
Donc, ce que webpack vous permet de faire est d'empaqueter votre application Angular d'une manière

28
00:02:08,150 --> 00:02:11,720
qu'il est facile à déployer sur un site Web et

29
00:02:11,720 --> 00:02:15,470
rendre votre application Angular disponible pour les utilisateurs.

30
00:02:15,470 --> 00:02:22,070
Maintenant que nous utilisons Angular CLI pour construire notre application Angular,

31
00:02:22,070 --> 00:02:26,040
Angular CLI tire déjà parti de webpack pour

32
00:02:26,040 --> 00:02:32,010
faisant sa construction pour le dossier de distribution pour votre application Angular.

33
00:02:32,010 --> 00:02:38,780
Nous n'avons donc pas besoin de faire explicitement de travail supplémentaire pour utiliser webpack.

34
00:02:38,780 --> 00:02:40,700
Une fois que nous utilisons Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Parce que l'Angular CLI s'occupe de tous les levages lourds en notre nom.

36
00:02:45,870 --> 00:02:50,664
Donc, mais avant de voir ce que la façon angulaire CLIs de construire votre distribution

37
00:02:50,664 --> 00:02:53,022
plus facile.

38
00:02:53,022 --> 00:02:57,162
Nous devons comprendre quelques concepts sur webpack et

39
00:02:57,162 --> 00:03:00,566
comment webpack fonctionne dans un peu de détail afin

40
00:03:00,566 --> 00:03:06,270
que lorsque Angular CLI produit le dossier de distribution, vous pouvez regarder et

41
00:03:06,270 --> 00:03:10,410
voir ce qui est exactement construit par Angular CLI.

42
00:03:10,410 --> 00:03:14,150
Donc, mon but de cette conférence

43
00:03:14,150 --> 00:03:18,950
particulière est de vous donner un bref aperçu de webpack.

44
00:03:18,950 --> 00:03:23,770
Cette conférence n'est pas une introduction à l'utilisation du webpack.

45
00:03:23,770 --> 00:03:26,400
Cela dépasse le cadre de ce cours, mais

46
00:03:26,400 --> 00:03:30,980
si vous êtes intéressé, le site webpacks

47
00:03:30,980 --> 00:03:36,280
a beaucoup d'informations sur la façon dont webpack peut être utilisé pour d'autres applications.

48
00:03:36,280 --> 00:03:39,800
Vous pouvez, en principe, utiliser webpack pour empaqueter votre application Bootstrap

49
00:03:41,350 --> 00:03:44,680
que vous avez également développée dans le cours précédent.

50
00:03:46,080 --> 00:03:50,680
Mais en ce moment, nous allons regarder comment nous utilisons webpack

51
00:03:51,840 --> 00:03:57,640
dans le cadre de la façon angulaire de la CLI de construire notre interprétation angulaire.

52
00:03:59,640 --> 00:04:02,890
Donc évidemment, la première question qui se pose dans votre esprit est,

53
00:04:02,890 --> 00:04:04,410
qu'est-ce que webpack exactement ?

54
00:04:04,410 --> 00:04:06,150
De quoi parlons-nous ?

55
00:04:06,150 --> 00:04:12,850
Webpack, c'est la définition de la documentation de webpack elle-même.

56
00:04:12,850 --> 00:04:19,130
Il dit que webpack est un module bundler pour les applications JavaScript modernes.

57
00:04:19,130 --> 00:04:21,723
Votre application Angular sur laquelle vous avez travaillé si

58
00:04:21,723 --> 00:04:24,530
loin est une application JavaScript moderne facile.

59
00:04:24,530 --> 00:04:29,590
Maintenant, vous travaillez tous avec la pointe de la technologie Angular.

60
00:04:29,590 --> 00:04:35,170
Et donc, évidemment, il se qualifie comme une application JavaScript moderne et

61
00:04:35,170 --> 00:04:38,570
donc, l'utilisation de webpack est parfaitement logique.

62
00:04:38,570 --> 00:04:40,980
Maintenant, ce que webpack est le meilleur,

63
00:04:40,980 --> 00:04:45,720
il regarde toute la structure de votre application Angular.

64
00:04:45,720 --> 00:04:50,610
Donc, il traverse récursivement votre code de votre application Angular

65
00:04:50,610 --> 00:04:54,980
cherchant à voir comment regrouper

66
00:04:54,980 --> 00:05:00,680
l'information dans ce qu'on appelle des paquets.

67
00:05:00,680 --> 00:05:05,947
Lorsque webpack regarde votre code, il traite tous les fichiers que vous avez

68
00:05:05,947 --> 00:05:12,735
dans votre application Angular, que ce soit un fichier JavaScript de Typescript,

69
00:05:12,735 --> 00:05:17,319
qu'il s'agisse d'un fichier CSS, que ce soit un fichier SAS, qu'il s'agisse d'un fichier image.

70
00:05:17,319 --> 00:05:21,781
Quoi qu'il en soit, il traite chacun d'eux comme des modules de son point de vue,

71
00:05:21,781 --> 00:05:25,438
et puis il décide, quelle est la meilleure façon d'empaqueter ces modules

72
00:05:25,438 --> 00:05:30,790
dans ce qu'on appelle des paquets qui peuvent être téléchargés à partir du.

73
00:05:30,790 --> 00:05:36,060
Serveur à votre navigateur web d'une manière confortable et pratique.

74
00:05:37,350 --> 00:05:42,820
Donc, quand nous parlons de webpack, nous devons évidemment clarifier ce qu'un bundle signifie.

75
00:05:42,820 --> 00:05:47,315
Comme je l'ai brièvement indiqué dans la diapositive précédente, un bundle n'est rien d'autre que

76
00:05:47,315 --> 00:05:51,155
un fichier JavaScript qui incorpore des actifs.

77
00:05:51,155 --> 00:05:56,130
Maintenant, vous devez garder cela à l'esprit que webpack traite tout comme JavaScript.

78
00:05:56,130 --> 00:06:02,410
Qu'il s'agisse de CSS ou d'un autre type de fichiers,

79
00:06:02,410 --> 00:06:05,930
ils seront également traités comme JavaScript du point de vue de webpack.

80
00:06:05,930 --> 00:06:10,790
Maintenant, ne vous inquiétez pas trop, webpack sait comment les emballer et

81
00:06:10,790 --> 00:06:15,470
les traiter comme des paquets JavaScript où il prépare ces paquets.

82
00:06:15,470 --> 00:06:19,740
Ou modules JavaScript où il prépare ces paquets.

83
00:06:19,740 --> 00:06:26,290
Donc, un bundle est quelque chose qui regroupe des modules qui appartiennent ensemble.

84
00:06:26,290 --> 00:06:29,010
Quand je parle du module, je n'implique pas le module Angular,

85
00:06:29,010 --> 00:06:30,690
Je n'implique pas le module JavaScript.

86
00:06:32,220 --> 00:06:36,170
Comme je l'ai dit et Webpack, chaque fichier est créé en tant que module.

87
00:06:36,170 --> 00:06:40,820
Et donc il regroupe ces modules,

88
00:06:40,820 --> 00:06:46,160
qui devraient être servis au client en une seule réponse à une demande.

89
00:06:47,200 --> 00:06:51,740
Donc webpack lui-même prend la décision de dire quelles parties

90
00:06:51,740 --> 00:06:55,070
devraient être réunies dans un paquet.

91
00:06:55,070 --> 00:06:59,000
Et devrait être livré ensemble afin que le rendu de votre application web

92
00:06:59,000 --> 00:07:04,120
soit effectué de la manière la plus efficace.

93
00:07:04,120 --> 00:07:09,190
Maintenant, Angular CLI a déjà construit sa configuration de la meilleure façon d'empaqueter

94
00:07:09,190 --> 00:07:17,370
les Assets Angular, de sorte qu'il est le plus commodément livré au navigateur.

95
00:07:17,370 --> 00:07:21,550
Donc, nous n'avons pas besoin de nous inquiéter de la façon de faire cela nous-mêmes,

96
00:07:21,550 --> 00:07:25,490
nous laisserons le soin de la logique angulaire CLI de prendre soin de toute cette configuration de

97
00:07:25,490 --> 00:07:29,540
comment ce pack construit ses paquets en notre nom.

98
00:07:29,540 --> 00:07:33,190
Alors ce que Webpack fait, c'est qu'il commence au plus haut niveau.

99
00:07:33,190 --> 00:07:38,450
Dans votre application Angular, le niveau le plus élevé est les fichiers index.html et main.js,

100
00:07:38,450 --> 00:07:43,930
comme nous l'avons appris dans la toute première leçon de ce cours.

101
00:07:43,930 --> 00:07:49,170
Donc, il commence là, et ensuite il suit toutes les entrées

102
00:07:49,170 --> 00:07:54,630
que vous utilisez dans ceux qui suivent le chemin et

103
00:07:54,630 --> 00:08:00,760
met en place une organisation hiérarchique de toutes les différentes parties.

104
00:08:00,760 --> 00:08:06,110
Donc ce qu'on appelle un graphe de dépendance est construit par webpack.

105
00:08:06,110 --> 00:08:10,840
Maintenant en utilisant ce graphique de dépendance, Webpack décide alors comment faire un paquet

106
00:08:10,840 --> 00:08:15,810
et que les images un ou plusieurs paquets car ils ont un sens

107
00:08:15,810 --> 00:08:21,630
pour votre application particulière que webpack est bundle.

108
00:08:21,630 --> 00:08:27,690
Et dans le processus de le faire, quand il gère des fichiers non-JavaScript,

109
00:08:27,690 --> 00:08:34,440
comme CSS, HTML et un SAS ou Images et ainsi de suite.

110
00:08:34,440 --> 00:08:38,240
Ensuite, il utilise des plugins qui vous permettent de pré-traiter et

111
00:08:38,240 --> 00:08:41,910
modifier ces fichiers, ces fichiers non JavaScript,

112
00:08:41,910 --> 00:08:46,970
de manière à ce qu'ils puissent être regroupés dans vos paquets webpack.

113
00:08:49,082 --> 00:08:52,070
Si vous utilisez webpack à partir de zéro,

114
00:08:52,070 --> 00:08:57,510
alors vous décrirez une partie de la configuration pour que votre webpack fonctionne.

115
00:08:57,510 --> 00:09:00,775
Sur ces fichiers dans un fichier nommé

116
00:09:00,775 --> 00:09:06,810
webpack.config.js que nous avons inclus dans le dossier racine de votre application.

117
00:09:06,810 --> 00:09:11,640
Dans notre cas, puisque nous comptons sur Angular CLI pour le faire en notre nom

118
00:09:11,640 --> 00:09:16,470
Angular CLI clique automatiquement ici lors de la construction de la configuration pour

119
00:09:16,470 --> 00:09:18,300
webpack pour travailler avec.

120
00:09:18,300 --> 00:09:23,260
Maintenant, quand nous parlons de webpack, il y a quatre concepts qui sont importants pour

121
00:09:23,260 --> 00:09:26,660
de comprendre comment webpack fonctionne sur les photos.

122
00:09:26,660 --> 00:09:28,740
Le premier est l'entrée.

123
00:09:28,740 --> 00:09:33,560
Entry est le point à partir duquel le webpack doit commencer et

124
00:09:33,560 --> 00:09:36,350
suivre pour construire le graphique de dépendance.

125
00:09:36,350 --> 00:09:40,260
Ainsi, le fichier main.ts par exemple, est un point d'entrée.

126
00:09:40,260 --> 00:09:44,490
Donc webpack peut commencer sa poursuite dans la construction du graphique de dépendance.

127
00:09:44,490 --> 00:09:50,860
Directement à main.ts, puis allez à la poursuite de toutes les instructions d'importation à partir de là

128
00:09:50,860 --> 00:09:56,160
à leurs autres fichiers, puis à partir de là, ils importent ces fichiers et

129
00:09:56,160 --> 00:10:01,490
ainsi de suite jusqu'à ce qu'il construise le graphique de dépendance.

130
00:10:02,930 --> 00:10:06,660
Maintenant, la deuxième partie est ce que nous appelons comme sortie.

131
00:10:06,660 --> 00:10:11,200
Dans webpack, la sortie est l'ensemble des paquets que webpack prépare

132
00:10:11,200 --> 00:10:11,740
en votre nom.

133
00:10:12,890 --> 00:10:15,590
Le troisième est les chargeurs.

134
00:10:15,590 --> 00:10:18,950
Maintenant webpack comme je l'ai dit ne comprend que JavaScript et

135
00:10:18,950 --> 00:10:21,540
il ne sait que comment travailler avec JavaScript.

136
00:10:21,540 --> 00:10:26,250
Mais comme je l'ai aussi mentionné, webpack traite chaque fichier comme un module.

137
00:10:26,250 --> 00:10:31,660
Donc, ces fichiers qui ne sont pas JavaScript doivent être transformés

138
00:10:31,660 --> 00:10:36,870
et ensuite mis dans vos paquets en utilisant

139
00:10:36,870 --> 00:10:42,300
transformations appropriées et ensuite ils seront ajoutés dans votre graphique de dépendance.

140
00:10:42,300 --> 00:10:45,420
C'est là que l'utilisation des différents plugins intervient.

141
00:10:45,420 --> 00:10:47,320
Qu'est-ce que les plugins vous aident à faire ?

142
00:10:47,320 --> 00:10:51,920
Les plugins vous aident à effectuer les différentes actions et fonctionnalités personnalisées

143
00:10:51,920 --> 00:10:58,020
ou compilations que vous devez faire pour construire vos paquets.

144
00:10:58,020 --> 00:11:02,820
Donc, cela vous aidera à transformer votre CSS en un moyen que je peux paquet

145
00:11:02,820 --> 00:11:06,830
dans vos paquets JavaScript, et ainsi de suite.

146
00:11:06,830 --> 00:11:12,570
C'est donc une introduction rapide à la façon dont webpack fonctionne réellement.

147
00:11:12,570 --> 00:11:17,420
Maintenant, avec cette introduction rapide, dans le prochain exercice, vous verrez

148
00:11:17,420 --> 00:11:22,750
que nous allons utiliser commodément une commande appelée ng

149
00:11:22,750 --> 00:11:28,360
build pour construire notre dossier de distribution pour notre application Angular.

150
00:11:28,360 --> 00:11:31,690
Ng build vous permet même de construire une version de développement ou une version de production

151
00:11:33,380 --> 00:11:36,440
de votre application Angular.

152
00:11:36,440 --> 00:11:38,790
Quand nous avons utilisé ng surf,

153
00:11:38,790 --> 00:11:43,270
l'Angular CLI utilisait en effet webpack pour emballer les choses.

154
00:11:43,270 --> 00:11:44,350
Donc, si vous revenez en arrière et

155
00:11:44,350 --> 00:11:50,630
regardez toutes les choses qui étaient imprimées dans votre fenêtre de terminal,

156
00:11:50,630 --> 00:11:55,910
vous commencerez à voir webpack travailler dans les coulisses pour faire les paquets.

157
00:11:57,070 --> 00:12:01,760
Maintenant, dans le prochain exercice, vous allez construire leur dossier de distribution,

158
00:12:01,760 --> 00:12:08,840
qui peut ensuite être copié sur votre site Web et ensuite déployer votre application Angular.

159
00:12:08,840 --> 00:12:12,020
Maintenant, j'ai déjà fait une build

160
00:12:12,020 --> 00:12:15,570
de l'application Angular que nous avons construite jusqu'à présent.

161
00:12:15,570 --> 00:12:20,380
Alors, allons-y jeter un coup d'œil au dossier de distribution pour voir ce qu'il y a dans

162
00:12:20,380 --> 00:12:24,370
avant de faire l'exercice.

163
00:12:24,370 --> 00:12:28,520
Donc, une fois que vous avez terminé l'exercice, je vous conseille fortement d'aller et

164
00:12:28,520 --> 00:12:36,140
regarder le dossier disque qui a été construit dans votre dossier de projet Angular applications.

165
00:12:36,140 --> 00:12:40,940
Et puis regardez et voyez exactement les fichiers que je vais vous montrer en ce moment.

166
00:12:40,940 --> 00:12:44,020
Droit dans le dossier de distribution.

167
00:12:44,020 --> 00:12:50,890
En allant à notre application Angular dans Visual Studio ici,

168
00:12:50,890 --> 00:12:53,950
vous voyez que j'ouvre maintenant le dossier de distribution.

169
00:12:53,950 --> 00:12:58,260
Et dans le dossier de distribution, vous verrez tout un tas de fichiers ici.

170
00:12:58,260 --> 00:13:03,905
Vous verrez un fichier nommé main une longue chaîne où

171
00:13:03,905 --> 00:13:09,890
.bundle.js de votre connaissance de Gulp et Grunt du cours précédent,

172
00:13:09,890 --> 00:13:14,620
vous commencerez à voir ce que signifie cette longue chaîne intermédiaire.

173
00:13:14,620 --> 00:13:19,830
C'est ainsi que vous ajoutez cette version à votre application.

174
00:13:19,830 --> 00:13:25,310
De même, vous voyez un autre fichier appelé styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Ensuite, vous voyez un vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
Et puis polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Ensuite, vous avez un fichier index.html, et

178
00:13:34,300 --> 00:13:37,350
vous vous demandez ce qui est arrivé à tout votre code HTML ?

179
00:13:37,350 --> 00:13:39,970
C'est dans un de ces paquets, d'accord.

180
00:13:39,970 --> 00:13:43,610
Donc tous les modèles que vous avez écrits sont tous là dans un de ces paquets,

181
00:13:43,610 --> 00:13:45,670
sauf la page index.html.

182
00:13:45,670 --> 00:13:51,206
Vous avez besoin de la page index.html explicitement parce que,

183
00:13:51,206 --> 00:13:54,348
lorsqu'un utilisateur tape l'URL pour

184
00:13:54,348 --> 00:13:59,024
votre site Web dans la barre d'adresse du navigateur.

185
00:13:59,024 --> 00:14:01,624
Ensuite, vous atterriez sur votre site Web et

186
00:14:01,624 --> 00:14:05,362
les pages HTML point index où vous commencez tout et

187
00:14:05,362 --> 00:14:11,400
vous en avez besoin pour amorcer votre application Angular, c'est pourquoi c'est là.

188
00:14:11,400 --> 00:14:16,170
Et puis vous voyez aussi les fichiers fontawesome là qui sont nécessaires et

189
00:14:16,170 --> 00:14:21,340
que dans l'actif vous voyez quelques images là, dans le dossier assets.

190
00:14:22,530 --> 00:14:28,980
Donc, en regardant rapidement le fichier principal, vous verrez que c'est

191
00:14:28,980 --> 00:14:35,185
comme vous pouvez le voir est un ensemble de fichiers concaténés compressés.

192
00:14:35,185 --> 00:14:40,025
Maintenant, si vous essayez de lire ça, ce ne sera pas facile,

193
00:14:40,025 --> 00:14:42,455
c'est un énorme fichier avec beaucoup de choses.

194
00:14:42,455 --> 00:14:46,695
Ceci inclut également tout le code framework angulaire,

195
00:14:46,695 --> 00:14:49,140
une main votre code que vous avez écrit.

196
00:14:49,140 --> 00:14:53,980
Et le code qui vient de Angular Material, Flex Layout et

197
00:14:53,980 --> 00:14:58,460
toutes les autres choses que vous avez incluses avec votre application Angular.

198
00:14:58,460 --> 00:15:02,480
De même, vous avez des polyfills, puis des styles et

199
00:15:02,480 --> 00:15:07,130
vous commencez à voir que toutes les choses que vous utilisez dans votre application Angular

200
00:15:07,130 --> 00:15:10,870
ont été regroupées dans ces fichiers.

201
00:15:12,270 --> 00:15:17,220
Donc avec cela, j'espère que vous avez un aperçu rapide de webpack.

202
00:15:17,220 --> 00:15:21,100
Maintenant, il est temps pour nous d'aller à l'exercice, où nous allons simplement utiliser la commande

203
00:15:21,100 --> 00:15:26,660
Angular CLI ng build pour construire ce dossier de distribution.

204
00:15:26,660 --> 00:15:30,810
Et vous verrez comment vous pouvez déployer votre application Angular sur un site Web.

205
00:15:31,870 --> 00:15:37,329
Juste après avoir terminé la construction.

206
00:15:37,329 --> 00:15:39,969
[MUSIQUE]