1
00:00:00,025 --> 00:00:05,570
[МУЗЫКА]

2
00:00:05,570 --> 00:00:09,319
В предыдущем курсе на Bootstrap 4

3
00:00:09,319 --> 00:00:14,613
мы узнали, как использовать скрипты NPM или Grunt или

4
00:00:14,613 --> 00:00:21,220
Gulp для создания папки дистрибутива для нашего веб-приложения.

5
00:00:21,220 --> 00:00:27,040
Итак, мы увидели, как строится папка дистрибутива, взяв все файлы HTML,

6
00:00:27,040 --> 00:00:30,270
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
Теперь, как насчет вашего углового приложения?

11
00:00:52,050 --> 00:00:57,240
Как мы упаковываем наше угловое приложение для развертывания его на веб-сайте?

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:13,780
тогда их угловое приложение оживет в их браузерах.

15
00:01:14,810 --> 00:01:19,430
Мы также посмотрим на угловой способ таргетинга

16
00:01:19,430 --> 00:01:23,890
мобильных устройств в следующих двух курсах, в этой специализации.

17
00:01:23,890 --> 00:01:27,770
Так что я не говорю конкретно об этом, в данный момент.

18
00:01:27,770 --> 00:01:32,180
Но здесь мы говорим о том, как настроить таргетинг окна веб-браузера.

19
00:01:32,180 --> 00:01:35,150
Использование кода углового приложения.

20
00:01:35,150 --> 00:01:38,050
Итак, переходим к вопросу о том, как мы упаковываем наше приложение Angular

21
00:01:38,050 --> 00:01:40,090
для развертывания?

22
00:01:40,090 --> 00:01:47,850
Теперь мы могли бы использовать грандиозные скрипты Gulp и NPM, если вы решите.

23
00:01:47,850 --> 00:01:53,290
Но в блоке появился новый ребенок, называемый webpack.

24
00:01:53,290 --> 00:01:59,540
Webpack, как мы бы поняли, довольно скоро является модулем bundler.

25
00:01:59,540 --> 00:02:03,040
Теперь мы рассмотрим некоторые детали в следующей паре слайдов.

26
00:02:03,040 --> 00:02:08,150
Итак, что webpack позволяет вам сделать, это упаковать ваше угловое приложение таким образом

27
00:02:08,150 --> 00:02:11,720
, что его легко развернуть на веб-сайте и

28
00:02:11,720 --> 00:02:15,470
сделать ваше угловое приложение доступным для пользователей.

29
00:02:15,470 --> 00:02:22,070
Теперь, поскольку мы используем угловой интерфейс командной строки для создания нашего углового приложения,

30
00:02:22,070 --> 00:02:26,040
Angular CLI уже использует webpack для

31
00:02:26,040 --> 00:02:32,010
, делая его построение для папки распространения для вашего углового приложения.

32
00:02:32,010 --> 00:02:38,780
Поэтому нам не нужно явно делать какую-либо дополнительную работу, чтобы использовать webpack.

33
00:02:38,780 --> 00:02:40,700
После того, как мы используем угловой интерфейс командной строки.

34
00:02:40,700 --> 00:02:45,870
Потому что Angular CLI заботится обо всем тяжелом подъеме от нашего имени.

35
00:02:45,870 --> 00:02:50,664
Итак, но прежде чем мы увидим, что Угловые CLI способ построения вашего дистрибутива

36
00:02:50,664 --> 00:02:53,022
дальнейшее облегчение.

37
00:02:53,022 --> 00:02:57,162
Нам нужно понять несколько концепций о webpack и

38
00:02:57,162 --> 00:03:00,566
как webpack работает в немного деталях, так что

39
00:03:00,566 --> 00:03:06,270
, когда Angular CLI создает папку дистрибутива, вы можете посмотреть и

40
00:03:06,270 --> 00:03:10,410
увидеть, что именно строится Angular CLI.

41
00:03:10,410 --> 00:03:14,150
Поэтому моя цель этой конкретной лекции

42
00:03:14,150 --> 00:03:18,950
- дать вам краткий обзор webpack.

43
00:03:18,950 --> 00:03:23,770
Эта лекция не является введением в использование webpack.

44
00:03:23,770 --> 00:03:26,400
Это выходит за рамки данного курса, но

45
00:03:26,400 --> 00:03:30,980
если вас интересует сайт webpacks

46
00:03:30,980 --> 00:03:36,280
имеет много информации о том, как webpack может быть использован для других приложений.

47
00:03:36,280 --> 00:03:39,800
Вы можете, в принципе, использовать webpack для упаковки вашего приложения Bootstrap

48
00:03:41,350 --> 00:03:44,680
, которое вы также разработали в предыдущем курсе.

49
00:03:46,080 --> 00:03:50,680
Но в этот момент мы рассмотрим, как мы используем webpack

50
00:03:51,840 --> 00:03:57,640
как часть способа построения угловой интерпретации CLI.

51
00:03:59,640 --> 00:04:02,890
Итак, очевидно, первый вопрос, который возникает в вашем сознании, -

52
00:04:02,890 --> 00:04:04,410
, что именно такое webpack?

53
00:04:04,410 --> 00:04:06,150
О чем мы говорим?

54
00:04:06,150 --> 00:04:12,850
Webpack, это определение из самой документации webpack.

55
00:04:12,850 --> 00:04:19,130
Он говорит, что webpack - это модульный пакет для современных приложений JavaScript.

56
00:04:19,130 --> 00:04:21,723
Ваше угловое приложение, над которым вы работали до сих пор

57
00:04:21,723 --> 00:04:24,530
, является простым современным приложением JavaScript.

58
00:04:24,530 --> 00:04:29,590
Теперь вы все работаете с передовыми технологиями Angular.

59
00:04:29,590 --> 00:04:35,170
И поэтому, очевидно, он квалифицируется как современное приложение JavaScript, и

60
00:04:35,170 --> 00:04:38,570
, следовательно, использование webpack имеет смысл.

61
00:04:38,570 --> 00:04:40,980
Теперь, какой webpack лучше всего,

62
00:04:40,980 --> 00:04:45,720
он смотрит на всю структуру вашего углового приложения.

63
00:04:45,720 --> 00:04:50,610
Таким образом, он рекурсивно проходит через ваш код вашего приложения Angular

64
00:04:50,610 --> 00:04:54,980
, чтобы увидеть, как лучше всего связывает

65
00:04:54,980 --> 00:05:00,680
информацию в то, что называется связками.

66
00:05:00,680 --> 00:05:05,947
Когда webpack смотрит на ваш код, он обрабатывает каждый файл, который у вас

67
00:05:05,947 --> 00:05:12,735
есть в вашем угловом приложении, будь то JavaScript файла Typescript,

68
00:05:12,735 --> 00:05:17,319
будь то файл CSS, будь то файл SAS, будь то файл изображения.

69
00:05:17,319 --> 00:05:21,781
Как бы то ни было, он рассматривает каждый из них как модули с точки зрения

70
00:05:21,781 --> 00:05:25,438
, а затем он решает, что является лучшим способом упаковки этих

71
00:05:25,438 --> 00:05:30,790
модулей в то, что называется пакетами, которые могут быть загружены из.

72
00:05:30,790 --> 00:05:36,060
Сервер для вашего веб-браузера в удобной и удобной манере.

73
00:05:37,350 --> 00:05:42,820
Поэтому, когда мы говорим о webpack, нам, очевидно, нужно уточнить, что означает пакет.

74
00:05:42,820 --> 00:05:47,315
Как я кратко сказал в предыдущем слайде, пакет - это не что иное, как

75
00:05:47,315 --> 00:05:51,155
файл JavaScript, который включает активы.

76
00:05:51,155 --> 00:05:56,130
Теперь вы должны иметь в виду, что webpack рассматривает все как JavaScript.

77
00:05:56,130 --> 00:06:02,410
Для него будь то CSS или любой из других типов файлов,

78
00:06:02,410 --> 00:06:05,930
они также будут рассматриваться как JavaScript с точки зрения webpack.

79
00:06:05,930 --> 00:06:10,790
Теперь не беспокойтесь, webpack знает, как упаковать их, и

80
00:06:10,790 --> 00:06:15,470
обрабатывает их как пакеты JavaScript, где он готовит эти пакеты.

81
00:06:15,470 --> 00:06:19,740
Или JavaScript модули, где он готовит эти пакеты.

82
00:06:19,740 --> 00:06:26,290
Таким образом, пакет - это то, что группируется вместе модули, которые принадлежат друг другу.

83
00:06:26,290 --> 00:06:29,010
Когда я говорю о модуле, я не подразумеваю угловой модуль,

84
00:06:29,010 --> 00:06:30,690
Я не подразумеваю модуль JavaScript.

85
00:06:32,220 --> 00:06:36,170
Как я уже сказал и Webpack, каждый файл создается как модуль.

86
00:06:36,170 --> 00:06:40,820
И поэтому он связывает эти модули вместе,

87
00:06:40,820 --> 00:06:46,160
, которые должны быть поданы клиенту в одном ответе на запрос.

88
00:06:47,200 --> 00:06:51,740
Таким образом webpack сам принимает решение о том, что

89
00:06:51,740 --> 00:06:55,070
части должны быть объединены в связку.

90
00:06:55,070 --> 00:06:59,000
И должны быть доставлены вместе, чтобы рендеринг вашего

91
00:06:59,000 --> 00:07:04,120
веб-приложения был выполнен наиболее эффективным образом.

92
00:07:04,120 --> 00:07:09,190
Теперь, Angular CLI уже построил свою конфигурацию того, как лучше всего упаковать

93
00:07:09,190 --> 00:07:17,370
Angular Assets, так что он наиболее удобно доставляется в браузер.

94
00:07:17,370 --> 00:07:21,550
Поэтому нам не нужно беспокоиться о том, как это сделать сами,

95
00:07:21,550 --> 00:07:25,490
мы оставим его угловой логике CLI, чтобы позаботиться обо всей этой конфигурации

96
00:07:25,490 --> 00:07:29,540
, как этот пакет строит свои пакеты от нашего имени.

97
00:07:29,540 --> 00:07:33,190
Итак, что делает Webpack, он начинается на самом верхнем уровне.

98
00:07:33,190 --> 00:07:38,450
В вашем угловом приложении самый верхний уровень - index.html и main.js файлы,

99
00:07:38,450 --> 00:07:43,930
, как мы узнали на самом первом уроке этого курса.

100
00:07:43,930 --> 00:07:49,170
Таким образом, он начинается там, а затем он следует за всеми входами

101
00:07:49,170 --> 00:07:54,630
, которые вы используете в тех, которые вниз по пути и

102
00:07:54,630 --> 00:08:00,760
вызывает иерархическую организацию всех различных частей.

103
00:08:00,760 --> 00:08:06,110
Итак, что называется графом зависимостей, построено webpack.

104
00:08:06,110 --> 00:08:10,840
Теперь, используя этот график зависимостей, Webpack затем решает, как

105
00:08:10,840 --> 00:08:15,810
упаковать его пакеты и что изображения одного или нескольких пакетов, поскольку они имеют смысл

106
00:08:15,810 --> 00:08:21,630
для вашего конкретного приложения, что webpack является пакетом.

107
00:08:21,630 --> 00:08:27,690
И в процессе этого, когда он обрабатывает не-JavaScript файлы,

108
00:08:27,690 --> 00:08:34,440
как CSS, HTML и SAS или Images и так далее.

109
00:08:34,440 --> 00:08:38,240
Затем он использует плагины, которые позволяют предварительно обрабатывать и

110
00:08:38,240 --> 00:08:41,910
изменять эти файлы, те файлы, не относящиеся к JavaScript,

111
00:08:41,910 --> 00:08:46,970
таким образом, чтобы они могли быть объединены в ваши пакеты webpack.

112
00:08:49,082 --> 00:08:52,070
Если вы используете webpack с нуля,

113
00:08:52,070 --> 00:08:57,510
, то вы бы описали некоторые конфигурации для работы вашего webpack.

114
00:08:57,510 --> 00:09:00,775
На этих файлах в файле с именем

115
00:09:00,775 --> 00:09:06,810
webpack.config.js, который мы включили в корневую папку вашего приложения.

116
00:09:06,810 --> 00:09:11,640
В нашем случае, поскольку мы полагаемся на Angular CLI, чтобы сделать это от нашего имени

117
00:09:11,640 --> 00:09:16,470
Угловой CLI автоматически нажимает здесь при построении конфигурации для

118
00:09:16,470 --> 00:09:18,300
webpack для работы с.

119
00:09:18,300 --> 00:09:23,260
Теперь, когда мы говорим о webpack, есть четыре понятия, которые важны для

120
00:09:23,260 --> 00:09:26,660
нас, чтобы понять, как webpack работает на фото.

121
00:09:26,660 --> 00:09:28,740
Первый вход.

122
00:09:28,740 --> 00:09:33,560
Entry - это точка, с которой webpack должен начинаться и

123
00:09:33,560 --> 00:09:36,350
следовать вниз, чтобы построить граф зависимостей.

124
00:09:36,350 --> 00:09:40,260
Итак, файл main.ts, например, является точкой входа.

125
00:09:40,260 --> 00:09:44,490
Таким образом, webpack может начать погоню в построении графика зависимостей.

126
00:09:44,490 --> 00:09:50,860
Прямо на main.ts, а затем идти преследовать после всех операторов импорта оттуда

127
00:09:50,860 --> 00:09:56,160
в их другие файлы, а затем оттуда они импортируют эти файлы и

128
00:09:56,160 --> 00:10:01,490
так далее до тех пор, пока он не создаст график зависимостей.

129
00:10:02,930 --> 00:10:06,660
Теперь вторая часть - это то, что мы называем выходным.

130
00:10:06,660 --> 00:10:11,200
В webpack вывод - это набор пакетов, которые webpack готовит

131
00:10:11,200 --> 00:10:11,740
от вашего имени.

132
00:10:12,890 --> 00:10:15,590
Третий - погрузчики.

133
00:10:15,590 --> 00:10:18,950
Теперь webpack, как я уже сказал, понимает только JavaScript и

134
00:10:18,950 --> 00:10:21,540
он знает только, как работать с JavaScript.

135
00:10:21,540 --> 00:10:26,250
Но, как я также упомянул, webpack рассматривает каждый файл как модуль.

136
00:10:26,250 --> 00:10:31,660
Таким образом, те файлы, которые не являются JavaScript, они должны быть преобразованы

137
00:10:31,660 --> 00:10:36,870
, а затем помещены в ваши пакеты, используя соответствующие преобразования

138
00:10:36,870 --> 00:10:42,300
, а затем они будут добавлены в ваш график зависимостей.

139
00:10:42,300 --> 00:10:45,420
Вот где используются различные плагины.

140
00:10:45,420 --> 00:10:47,320
Что вам помогают плагины?

141
00:10:47,320 --> 00:10:51,920
Плагины помогают вам выполнять различные действия и пользовательские функции

142
00:10:51,920 --> 00:10:58,020
или компиляции, которые вам нужно сделать для создания ваших пакетов.

143
00:10:58,020 --> 00:11:02,820
Таким образом, это поможет вам преобразовать ваш CSS в способ, который я могу пакет

144
00:11:02,820 --> 00:11:06,830
в ваши пакеты JavaScript и так далее.

145
00:11:06,830 --> 00:11:12,570
Так что это краткое введение в то, как на самом деле работает webpack.

146
00:11:12,570 --> 00:11:17,420
Теперь с этим быстрым введением, в следующем упражнении вы увидите

147
00:11:17,420 --> 00:11:22,750
, что мы будем удобно использовать команду ng

148
00:11:22,750 --> 00:11:28,360
build для создания нашей папки дистрибутива для нашего углового приложения.

149
00:11:28,360 --> 00:11:31,690
Ng build позволяет даже создавать версию разработки или

150
00:11:33,380 --> 00:11:36,440
производственной версии вашего Angular приложения.

151
00:11:36,440 --> 00:11:38,790
Когда мы использовали ng surf,

152
00:11:38,790 --> 00:11:43,270
Угловой CLI действительно использовал webpack для упаковки вещей.

153
00:11:43,270 --> 00:11:44,350
Поэтому, если вы вернетесь назад и

154
00:11:44,350 --> 00:11:50,630
посмотрите на все вещи, которые были напечатаны в окне терминала,

155
00:11:50,630 --> 00:11:55,910
вы начнете видеть, как webpack работает за кулисами, чтобы сделать пакеты.

156
00:11:57,070 --> 00:12:01,760
Теперь в следующем упражнении вы создадите их папку дистрибутива

157
00:12:01,760 --> 00:12:08,840
, которую затем можно скопировать на ваш сайт, а затем развернуть приложение Angular.

158
00:12:08,840 --> 00:12:12,020
Теперь я уже сделал одну сборку

159
00:12:12,020 --> 00:12:15,570
углового приложения, которое мы построили до сих пор.

160
00:12:15,570 --> 00:12:20,380
Итак, давайте пойдем и быстро посмотрим на папку дистрибутива, чтобы увидеть, что находится в

161
00:12:20,380 --> 00:12:24,370
, прежде чем вы действительно выполните упражнение.

162
00:12:24,370 --> 00:12:28,520
Поэтому, как только вы завершите упражнение, я бы настоятельно посоветовал вам пойти и

163
00:12:28,520 --> 00:12:36,140
посмотреть на папку диска, которая была построена в папке проекта Angular приложений.

164
00:12:36,140 --> 00:12:40,940
А затем посмотрите и посмотрите именно те файлы, которые я вам сейчас покажу.

165
00:12:40,940 --> 00:12:44,020
Прямо в папке дистрибутива.

166
00:12:44,020 --> 00:12:50,890
Перейдя в наше угловое приложение в Visual Studio здесь,

167
00:12:50,890 --> 00:12:53,950
вы видите, что я теперь открываю папку дистрибутива.

168
00:12:53,950 --> 00:12:58,260
И внутри папки дистрибутива вы увидите здесь целую кучу файлов.

169
00:12:58,260 --> 00:13:03,905
Вы увидите файл с именем main длинная строка, где

170
00:13:03,905 --> 00:13:09,890
.bundle.js из ваших знаний Gulp и Grunt из предыдущего курса,

171
00:13:09,890 --> 00:13:14,620
вы начнете видеть, что означает эта промежуточная длинная строка.

172
00:13:14,620 --> 00:13:19,830
Вот как вы добавляете эту версию в свое приложение.

173
00:13:19,830 --> 00:13:25,310
Точно так же вы видите другой файл под названием styles.something.css.

174
00:13:25,310 --> 00:13:28,834
Тогда вы видите vendor.bundle.js.

175
00:13:28,834 --> 00:13:31,319
А потом polyfills.js.

176
00:13:31,319 --> 00:13:34,300
Тогда у вас есть файл index.html, и

177
00:13:34,300 --> 00:13:37,350
вам интересно, что случилось со всем вашим HTML-кодом?

178
00:13:37,350 --> 00:13:39,970
Это в одном из этих пучков, хорошо.

179
00:13:39,970 --> 00:13:43,610
Таким образом, все шаблоны, которые вы написали, находятся в одном из этих пакетов,

180
00:13:43,610 --> 00:13:45,670
, кроме страницы index.html.

181
00:13:45,670 --> 00:13:51,206
Вам нужна страница index.html явно, потому что

182
00:13:51,206 --> 00:13:54,348
, когда пользователь вводит URL-адрес для

183
00:13:54,348 --> 00:13:59,024
вашего сайта в адресную строку браузера.

184
00:13:59,024 --> 00:14:01,624
Тогда вы приземлитесь на своем сайте и

185
00:14:01,624 --> 00:14:05,362
индекс точки HTML страниц, где вы начинаете все, и

186
00:14:05,362 --> 00:14:11,400
вам нужно, чтобы загрузить ваше угловое приложение, так вот почему это есть.

187
00:14:11,400 --> 00:14:16,170
А затем вы также видите fontawesome файлы там, которые необходимы и

188
00:14:16,170 --> 00:14:21,340
, что внутри актива вы видите некоторые изображения там, в папке активов.

189
00:14:22,530 --> 00:14:28,980
Итак, быстро взглянув на основной файл, вы увидите, что это

190
00:14:28,980 --> 00:14:35,185
, как вы можете видеть, это много файлов, сжатых конкатенированный набор файлов.

191
00:14:35,185 --> 00:14:40,025
Теперь, если вы попытаетесь прочитать это, это будет нелегко,

192
00:14:40,025 --> 00:14:42,455
это огромный файл с большим количеством вещей.

193
00:14:42,455 --> 00:14:46,695
Это также включает в себя все угловые фреймворки код,

194
00:14:46,695 --> 00:14:49,140
руку ваш код, который вы написали.

195
00:14:49,140 --> 00:14:53,980
И код, который приходит из углового материала, Flex Layout и

196
00:14:53,980 --> 00:14:58,460
все другие вещи, которые вы включили в ваше приложение Angular.

197
00:14:58,460 --> 00:15:02,480
Аналогично, у вас есть полизаливки, а затем стили и

198
00:15:02,480 --> 00:15:07,130
вы начинаете видеть, что все вещи, которые вы используете в приложении Angular

199
00:15:07,130 --> 00:15:10,870
, были объединены в эти файлы там.

200
00:15:12,270 --> 00:15:17,220
Так что с этим я надеюсь, что вы получили быстрый обзор webpack.

201
00:15:17,220 --> 00:15:21,100
Теперь настало время для нас, чтобы перейти к упражнению, где мы просто используем команду

202
00:15:21,100 --> 00:15:26,660
Angular CLI ng build, чтобы построить эту папку дистрибутива.

203
00:15:26,660 --> 00:15:30,810
И вы увидите, как вы можете развернуть свое угловое приложение на веб-сайте.

204
00:15:31,870 --> 00:15:37,329
Сразу после завершения сборки.

205
00:15:37,329 --> 00:15:39,969
[МУЗЫКА]