1
00:00:00,025 --> 00:00:05,570
[MÚSICA]

2
00:00:05,570 --> 00:00:09,319
No curso anterior no Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
aprendemos como fazer uso de scripts NPM ou Grunt ou

4
00:00:14,613 --> 00:00:21,220
Gulp para construir a pasta de distribuição para nosso aplicativo web.

5
00:00:21,220 --> 00:00:27,040
Então, vimos como a pasta de distribuição é construída tomando todos os arquivos HTML,

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

7
00:00:30,270 --> 00:00:35,540
E então fazendo modificação, uglification, concatenação,

8
00:00:35,540 --> 00:00:40,490
e várias outras transformações neles para construir arquivos de distribuição que podem ser

9
00:00:40,490 --> 00:00:48,470
simplesmente copiados para o servidor e, em seguida, tornar seu site disponível para os usuários.

10
00:00:48,470 --> 00:00:52,050
Agora, e o seu aplicativo Angular?

11
00:00:52,050 --> 00:00:57,240
Como empacotamos nosso aplicativo Angular para implantá-lo em um site?

12
00:00:57,240 --> 00:01:01,670
Agora, como você percebe seu aplicativo angular também vai ser

13
00:01:01,670 --> 00:01:06,630
implantado em um site de onde as pessoas vão acessar seu aplicativo Angular,

14
00:01:06,630 --> 00:01:09,350
baixar o aplicativo Angular para o navegador e

15
00:01:09,350 --> 00:01:13,780
então sua aplicação angular vai ganhar vida em seus navegadores.

16
00:01:14,810 --> 00:01:19,430
Vamos, também olhar para a maneira angular de segmentar

17
00:01:19,430 --> 00:01:23,890
dispositivos móveis nos próximos dois cursos, nesta especialização.

18
00:01:23,890 --> 00:01:27,770
Então eu não estou falando especificamente sobre isso, neste momento.

19
00:01:27,770 --> 00:01:32,180
Mas aqui estamos falando sobre como segmentar uma janela do navegador web.

20
00:01:32,180 --> 00:01:35,150
Usando seu código de aplicativo Angular.

21
00:01:35,150 --> 00:01:38,050
Então, chegando à questão de como empacotamos nosso aplicativo Angular

22
00:01:38,050 --> 00:01:40,090
para implantação?

23
00:01:40,090 --> 00:01:47,850
Agora nós poderíamos usar a forma de scripts Grand Gulp e NPM de fazê-lo, se você escolher.

24
00:01:47,850 --> 00:01:53,290
Mas há um novo garoto no bloco chamado como webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack como entenderíamos muito em breve é um empacotador de módulos.

26
00:01:59,540 --> 00:02:03,040
Agora, vamos olhar para alguns detalhes nos próximos dois slides.

27
00:02:03,040 --> 00:02:08,150
Então, o que webpack permite que você faça é empacotar seu aplicativo Angular de uma maneira

28
00:02:08,150 --> 00:02:11,720
que é fácil de implantar em um site e

29
00:02:11,720 --> 00:02:15,470
tornar seu aplicativo Angular disponível para os usuários.

30
00:02:15,470 --> 00:02:22,070
Agora, como estamos usando Angular CLI para construir nossa aplicação Angular,

31
00:02:22,070 --> 00:02:26,040
Angular CLI já aproveita o webpack para

32
00:02:26,040 --> 00:02:32,010
fazendo sua construção para a pasta de distribuição para sua aplicação Angular.

33
00:02:32,010 --> 00:02:38,780
Portanto, não precisamos fazer qualquer trabalho adicional explicitamente para fazer uso do webpack.

34
00:02:38,780 --> 00:02:40,700
Uma vez que estamos usando Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Porque a Angular CLI cuida de todo o trabalho pesado em nosso nome.

36
00:02:45,870 --> 00:02:50,664
Então, mas antes de ver o que a maneira Angular CLIs de construir sua distribuição

37
00:02:50,664 --> 00:02:53,022
ainda mais facilidade.

38
00:02:53,022 --> 00:02:57,162
Precisamos entender alguns conceitos sobre webpack e

39
00:02:57,162 --> 00:03:00,566
como webpack funciona com um pouco de detalhe para

40
00:03:00,566 --> 00:03:06,270
que quando Angular CLI produz a pasta de distribuição você pode olhar e

41
00:03:06,270 --> 00:03:10,410
ver o que exatamente está sendo construído pela Angular CLI.

42
00:03:10,410 --> 00:03:14,150
Então meu objetivo desta palestra

43
00:03:14,150 --> 00:03:18,950
em particular é apenas dar-lhe uma breve visão geral do webpack.

44
00:03:18,950 --> 00:03:23,770
Esta palestra não é uma introdução a como fazer uso do webpack.

45
00:03:23,770 --> 00:03:26,400
Isso está além do escopo deste curso, mas

46
00:03:26,400 --> 00:03:30,980
se você estiver interessado, o site de webpacks

47
00:03:30,980 --> 00:03:36,280
tem muitas informações sobre como webpack pode ser usado para outras aplicações.

48
00:03:36,280 --> 00:03:39,800
Você poderia, em princípio, usar webpack para empacotar seu aplicativo Bootstrap

49
00:03:41,350 --> 00:03:44,680
que você desenvolveu no curso anterior também.

50
00:03:46,080 --> 00:03:50,680
Mas neste momento vamos olhar para como fazemos uso do webpack

51
00:03:51,840 --> 00:03:57,640
como parte da forma Angular CLI de construir nossa interpretação angular.

52
00:03:59,640 --> 00:04:02,890
Então, obviamente, a primeira pergunta que surge em sua mente é,

53
00:04:02,890 --> 00:04:04,410
o que exatamente é webpack?

54
00:04:04,410 --> 00:04:06,150
Do que estamos falando?

55
00:04:06,150 --> 00:04:12,850
Webpack, esta é a definição da própria documentação do webpack.

56
00:04:12,850 --> 00:04:19,130
Ele diz que o webpack é um pacote de módulos para aplicações JavaScript modernas.

57
00:04:19,130 --> 00:04:21,723
Seu aplicativo Angular que você tem trabalhado até

58
00:04:21,723 --> 00:04:24,530
agora é um aplicativo JavaScript moderno e fácil.

59
00:04:24,530 --> 00:04:29,590
Agora todos vocês estão trabalhando com a vanguarda da tecnologia Angular.

60
00:04:29,590 --> 00:04:35,170
E assim, obviamente, ele se qualifica como um aplicativo JavaScript moderno e

61
00:04:35,170 --> 00:04:38,570
portanto, usar webpack faz todo o sentido.

62
00:04:38,570 --> 00:04:40,980
Agora o que webpack melhor é,

63
00:04:40,980 --> 00:04:45,720
ele olha para toda a estrutura do seu aplicativo Angular.

64
00:04:45,720 --> 00:04:50,610
Então, ele atravessa recursivamente o seu código do seu aplicativo Angular

65
00:04:50,610 --> 00:04:54,980
procurando ver a melhor forma de agrupar

66
00:04:54,980 --> 00:05:00,680
as informações no que é chamado como pacotes.

67
00:05:00,680 --> 00:05:05,947
Quando webpack olha para o seu código, ele trata todos os arquivos que você

68
00:05:05,947 --> 00:05:12,735
tem dentro de seu aplicativo Angular, seja ele um JavaScript de arquivo Typescript,

69
00:05:12,735 --> 00:05:17,319
seja um arquivo CSS, seja ele um arquivo SAS, seja ele um arquivo de imagem.

70
00:05:17,319 --> 00:05:21,781
Seja qual for, ele trata cada um deles como módulos de sua perspectiva,

71
00:05:21,781 --> 00:05:25,438
e então decide, qual é a melhor maneira de empacotar esses módulos

72
00:05:25,438 --> 00:05:30,790
no que são chamados como pacotes que podem ser baixados do.

73
00:05:30,790 --> 00:05:36,060
Server para o seu navegador web de uma maneira confortável e conveniente.

74
00:05:37,350 --> 00:05:42,820
Então, quando falamos sobre webpack, obviamente precisamos esclarecer o que significa um pacote.

75
00:05:42,820 --> 00:05:47,315
Como afirmei brevemente no slide anterior, um pacote não passa de

76
00:05:47,315 --> 00:05:51,155
um arquivo JavaScript que incorpora ativos.

77
00:05:51,155 --> 00:05:56,130
Agora, você tem que ter isso em mente que o webpack trata tudo como JavaScript.

78
00:05:56,130 --> 00:06:02,410
Para ele se é CSS ou qualquer um dos outros tipos de arquivos,

79
00:06:02,410 --> 00:06:05,930
eles também serão tratados como JavaScript a partir da perspectiva do webpack.

80
00:06:05,930 --> 00:06:10,790
Agora não fique muito preocupado, o webpack sabe como empacotá-los e

81
00:06:10,790 --> 00:06:15,470
tratá-los como pacotes JavaScript onde ele prepara esses pacotes.

82
00:06:15,470 --> 00:06:19,740
Ou módulos JavaScript onde ele prepara esses pacotes.

83
00:06:19,740 --> 00:06:26,290
Então, um pacote é algo que agrupa módulos que pertencem juntos.

84
00:06:26,290 --> 00:06:29,010
Quando eu falo sobre módulo Eu não estou implicando módulo Angular,

85
00:06:29,010 --> 00:06:30,690
Eu não estou implicando módulo JavaScript.

86
00:06:32,220 --> 00:06:36,170
Como eu disse e Webpack, cada arquivo é criado como um módulo.

87
00:06:36,170 --> 00:06:40,820
E assim agrupar esses módulos juntos,

88
00:06:40,820 --> 00:06:46,160
que devem ser servidos ao cliente em uma única resposta a uma solicitação.

89
00:06:47,200 --> 00:06:51,740
Então, o próprio webpack toma uma decisão sobre o que

90
00:06:51,740 --> 00:06:55,070
partes devem ser unidas em um pacote.

91
00:06:55,070 --> 00:06:59,000
E deve ser entregue em conjunto para que a renderização do seu aplicativo web

92
00:06:59,000 --> 00:07:04,120
seja feita da maneira mais eficaz.

93
00:07:04,120 --> 00:07:09,190
Agora, Angular CLI já construiu sua configuração de como melhor empacotar

94
00:07:09,190 --> 00:07:17,370
o Angular Assets, de modo que ele é mais convenientemente entregue ao navegador.

95
00:07:17,370 --> 00:07:21,550
Então não precisamos nos preocupar sobre como fazer isso nós mesmos,

96
00:07:21,550 --> 00:07:25,490
vamos deixar para a lógica angular CLI cuidar de toda essa configuração de

97
00:07:25,490 --> 00:07:29,540
como esse pacote constrói seus pacotes em nosso nome.

98
00:07:29,540 --> 00:07:33,190
Então, o que Webpack faz é, ele começa no nível mais alto.

99
00:07:33,190 --> 00:07:38,450
Na sua aplicação Angular, o nível superior é index.html e main.js arquivos,

100
00:07:38,450 --> 00:07:43,930
como aprendemos na primeira lição deste curso.

101
00:07:43,930 --> 00:07:49,170
Então ele começa lá, e depois segue todas as entradas

102
00:07:49,170 --> 00:07:54,630
que você usa naqueles no caminho e

103
00:07:54,630 --> 00:08:00,760
traz uma organização hierárquica de todas as partes diferentes.

104
00:08:00,760 --> 00:08:06,110
Então, o que é chamado de gráfico de dependência é construído por webpack.

105
00:08:06,110 --> 00:08:10,840
Agora usando este gráfico de dependência, Webpack então decide como

106
00:08:10,840 --> 00:08:15,810
empacotar seus pacotes e que imagens um ou mais pacotes como eles fazem

107
00:08:15,810 --> 00:08:21,630
sentido para seu aplicativo específico que webpack é pacote.

108
00:08:21,630 --> 00:08:27,690
E no processo de fazê-lo, quando ele está manipulando arquivos não-JavaScript,

109
00:08:27,690 --> 00:08:34,440
como CSS, HTML e um SAS ou Images e assim por diante.

110
00:08:34,440 --> 00:08:38,240
Em seguida, ele usa plugins que permitem pré-processar e

111
00:08:38,240 --> 00:08:41,910
modificar esses arquivos, esses arquivos não JavaScript,

112
00:08:41,910 --> 00:08:46,970
de uma forma que eles podem ser agrupados em seus pacotes webpack.

113
00:08:49,082 --> 00:08:52,070
Se você estiver usando webpack do zero,

114
00:08:52,070 --> 00:08:57,510
então você descreveria algumas das configurações do seu webpack para funcionar.

115
00:08:57,510 --> 00:09:00,775
Nesses arquivos em um arquivo chamado

116
00:09:00,775 --> 00:09:06,810
webpack.config.js que incluímos na pasta raiz do seu aplicativo.

117
00:09:06,810 --> 00:09:11,640
No nosso caso, uma vez que estamos confiando na Angular CLI para fazer isso em nosso nome

118
00:09:11,640 --> 00:09:16,470
Angular CLI clica automaticamente aqui na construção da configuração para

119
00:09:16,470 --> 00:09:18,300
webpack para trabalhar.

120
00:09:18,300 --> 00:09:23,260
Agora, quando falamos sobre webpack, há quatro conceitos que são importantes para

121
00:09:23,260 --> 00:09:26,660
nós entendermos sobre como webpack funciona em fotos.

122
00:09:26,660 --> 00:09:28,740
O primeiro é a entrada.

123
00:09:28,740 --> 00:09:33,560
Entry é o ponto em que o webpack deve iniciar e

124
00:09:33,560 --> 00:09:36,350
seguir para baixo para criar o gráfico de dependência.

125
00:09:36,350 --> 00:09:40,260
Então, arquivo main.ts, por exemplo, é um ponto de entrada.

126
00:09:40,260 --> 00:09:44,490
Então webpack pode começar sua perseguição na construção do gráfico de dependência.

127
00:09:44,490 --> 00:09:50,860
Direto em main.ts e depois ir atrás de todas as instruções de importação de lá

128
00:09:50,860 --> 00:09:56,160
para seus outros arquivos e, em seguida, a partir daí eles importam esses arquivos e

129
00:09:56,160 --> 00:10:01,490
assim por diante todo o caminho para baixo até que ele constrói o gráfico de dependência.

130
00:10:02,930 --> 00:10:06,660
Agora, a segunda parte é o que chamaríamos como a saída.

131
00:10:06,660 --> 00:10:11,200
No webpack, a saída é o conjunto de pacotes que o webpack prepara

132
00:10:11,200 --> 00:10:11,740
em seu nome.

133
00:10:12,890 --> 00:10:15,590
O terceiro é carregadores.

134
00:10:15,590 --> 00:10:18,950
Agora webpack como eu disse só entende JavaScript e

135
00:10:18,950 --> 00:10:21,540
sabe apenas como trabalhar com JavaScript.

136
00:10:21,540 --> 00:10:26,250
Mas como eu também mencionei, o webpack trata todos os arquivos como um módulo.

137
00:10:26,250 --> 00:10:31,660
Então aqueles arquivos que não são JavaScript eles têm que ser

138
00:10:31,660 --> 00:10:36,870
transformados e, em seguida, colocar em seus pacotes usando

139
00:10:36,870 --> 00:10:42,300
transformações apropriadas e, em seguida, eles serão adicionados ao seu gráfico de dependência.

140
00:10:42,300 --> 00:10:45,420
É aqui que entra o uso dos vários plugins.

141
00:10:45,420 --> 00:10:47,320
O que os plugins ajudam você a fazer?

142
00:10:47,320 --> 00:10:51,920
Os plugins ajudam você a executar as várias ações e funcionalidades personalizadas

143
00:10:51,920 --> 00:10:58,020
ou compilações que você precisa fazer para construir seus pacotes.

144
00:10:58,020 --> 00:11:02,820
Então ele vai ajudá-lo a transformar seu CSS em uma maneira que eu posso

145
00:11:02,820 --> 00:11:06,830
pacote em seus pacotes JavaScript, e assim por diante.

146
00:11:06,830 --> 00:11:12,570
Então, essa é uma introdução rápida de como o webpack realmente funciona.

147
00:11:12,570 --> 00:11:17,420
Agora com essa rápida introdução, no próximo exercício você vai

148
00:11:17,420 --> 00:11:22,750
ver que vamos convenientemente fazer uso de um comando chamado ng

149
00:11:22,750 --> 00:11:28,360
build para construir nossa pasta de distribuição para nossa aplicação Angular.

150
00:11:28,360 --> 00:11:31,690
Ng build permite até mesmo construir uma versão de desenvolvimento ou

151
00:11:33,380 --> 00:11:36,440
versão de produção do seu aplicativo Angular.

152
00:11:36,440 --> 00:11:38,790
Quando usamos ng surf,

153
00:11:38,790 --> 00:11:43,270
o Angular CLI estava realmente fazendo uso de webpack para embalar coisas.

154
00:11:43,270 --> 00:11:44,350
Então, se você voltar e

155
00:11:44,350 --> 00:11:50,630
olhar para todas as coisas que estavam sendo impressas na janela do seu terminal,

156
00:11:50,630 --> 00:11:55,910
você começará a ver webpack trabalhando nos bastidores para fazer os pacotes.

157
00:11:57,070 --> 00:12:01,760
Agora, no próximo exercício, você vai construir sua pasta de distribuição,

158
00:12:01,760 --> 00:12:08,840
que pode então ser copiado para o seu site e, em seguida, implantar seu aplicativo Angular.

159
00:12:08,840 --> 00:12:12,020
Agora eu já fiz uma compilação

160
00:12:12,020 --> 00:12:15,570
do aplicativo Angular que nós construímos até agora.

161
00:12:15,570 --> 00:12:20,380
Então, vamos dar uma olhada rápida na pasta de distribuição para ver o que está em

162
00:12:20,380 --> 00:12:24,370
lá antes de você realmente fazer o exercício.

163
00:12:24,370 --> 00:12:28,520
Assim, uma vez que você completar o exercício, eu recomendo fortemente que você vá e

164
00:12:28,520 --> 00:12:36,140
olhar para a pasta de disco que foi construído em sua pasta de projeto de aplicativos Angulares.

165
00:12:36,140 --> 00:12:40,940
E então olhe e veja exatamente os arquivos que vou mostrar agora.

166
00:12:40,940 --> 00:12:44,020
Direto na pasta de distribuição.

167
00:12:44,020 --> 00:12:50,890
Indo para a nossa aplicação Angular no Visual Studio aqui,

168
00:12:50,890 --> 00:12:53,950
você vê que agora estou abrindo a pasta de distribuição.

169
00:12:53,950 --> 00:12:58,260
E dentro da pasta de distribuição você verá um monte de arquivos aqui.

170
00:12:58,260 --> 00:13:03,905
Você verá um arquivo chamado main uma longa cadeia onde

171
00:13:03,905 --> 00:13:09,890
.bundle.js de seu conhecimento de Gulp e Grunt do curso anterior,

172
00:13:09,890 --> 00:13:14,620
você vai começar a ver o que essa cadeia longa intermediária significa.

173
00:13:14,620 --> 00:13:19,830
É assim que você adiciona esse controle de versão ao seu aplicativo.

174
00:13:19,830 --> 00:13:25,310
Da mesma forma, você vê outro arquivo chamado styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Então você vê um vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
E depois polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Então você tem um arquivo index.html, e

178
00:13:34,300 --> 00:13:37,350
você está se perguntando o que aconteceu com todo o seu código HTML?

179
00:13:37,350 --> 00:13:39,970
Está em um daqueles pacotes lá, ok.

180
00:13:39,970 --> 00:13:43,610
Então, todos os modelos que você escreveu estão todos lá em um desses pacotes,

181
00:13:43,610 --> 00:13:45,670
exceto a página index.html.

182
00:13:45,670 --> 00:13:51,206
Você precisa da página index.html explicitamente porque,

183
00:13:51,206 --> 00:13:54,348
quando um usuário digita o URL para

184
00:13:54,348 --> 00:13:59,024
seu site na barra de endereços do navegador.

185
00:13:59,024 --> 00:14:01,624
Então você iria pousar em seu site e

186
00:14:01,624 --> 00:14:05,362
as páginas HTML do ponto de índice onde você começa tudo e

187
00:14:05,362 --> 00:14:11,400
você precisa que para inicializar seu aplicativo Angular de modo que é por isso que isso está lá.

188
00:14:11,400 --> 00:14:16,170
E então você também vê os arquivos fontawesome lá que são necessários e

189
00:14:16,170 --> 00:14:21,340
que dentro do ativo você vê algumas imagens lá, na pasta de ativos.

190
00:14:22,530 --> 00:14:28,980
Então, dando uma olhada rápida no arquivo principal, você verá que este é

191
00:14:28,980 --> 00:14:35,185
como você pode ver é um conjunto concatenado de muitos arquivos compactados.

192
00:14:35,185 --> 00:14:40,025
Agora, se você tentar ler isso, não vai ser fácil,

193
00:14:40,025 --> 00:14:42,455
é um arquivo enorme com um monte de coisas.

194
00:14:42,455 --> 00:14:46,695
Isso também inclui todo o código de estruturas angulares,

195
00:14:46,695 --> 00:14:49,140
uma mão seu código que você escreveu.

196
00:14:49,140 --> 00:14:53,980
E o código que vem de Angular Material, Flex Layout e

197
00:14:53,980 --> 00:14:58,460
todas as outras coisas que você incluiu com seu aplicativo Angular.

198
00:14:58,460 --> 00:15:02,480
Da mesma forma, você tem polyfills e, em seguida, estilos e

199
00:15:02,480 --> 00:15:07,130
você começa a ver que todas as coisas que você usa dentro do seu aplicativo Angular

200
00:15:07,130 --> 00:15:10,870
foram empacotadas nesses arquivos lá.

201
00:15:12,270 --> 00:15:17,220
Então, com isso, espero que você tenha uma visão geral rápida do webpack.

202
00:15:17,220 --> 00:15:21,100
Agora é hora de irmos para o exercício, onde vamos simplesmente fazer uso do comando

203
00:15:21,100 --> 00:15:26,660
Angular CLI ng build para construir esta pasta de distribuição.

204
00:15:26,660 --> 00:15:30,810
E você verá como você pode implantar seu aplicativo Angular em um site.

205
00:15:31,870 --> 00:15:37,329
Logo após concluir a compilação.

206
00:15:37,329 --> 00:15:39,969
[MÚSICA]