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

2
00:00:05,570 --> 00:00:09,319
Trong khóa học trước đó trên Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
chúng tôi đã học cách sử dụng các kịch bản NPM hoặc Grunt hoặc

4
00:00:14,613 --> 00:00:21,220
Gulp để xây dựng thư mục phân phối cho ứng dụng web của chúng tôi.

5
00:00:21,220 --> 00:00:27,040
Vì vậy, chúng tôi đã thấy cách thư mục phân phối được xây dựng bằng cách lấy tất cả các

6
00:00:27,040 --> 00:00:30,270
tệp HTML, CSS và JavaScript.

7
00:00:30,270 --> 00:00:35,540
Và sau đó thực hiện sửa đổi, uglification, nối

8
00:00:35,540 --> 00:00:40,490
và các biến đổi khác nhau trên này để xây dựng các tập tin phân phối có thể được

9
00:00:40,490 --> 00:00:48,470
sao chép đơn giản vào máy chủ và sau đó làm cho trang web của bạn có sẵn cho người dùng.

10
00:00:48,470 --> 00:00:52,050
Bây giờ, còn ứng dụng Angular của bạn thì sao?

11
00:00:52,050 --> 00:00:57,240
Làm thế nào để chúng tôi đóng gói ứng dụng Angular của chúng tôi để triển khai nó trên một trang web?

12
00:00:57,240 --> 00:01:01,670
Bây giờ khi bạn nhận ra ứng dụng góc cạnh của bạn cũng là cuối cùng sẽ được

13
00:01:01,670 --> 00:01:06,630
triển khai đến một trang web từ nơi mọi người sẽ truy cập vào ứng dụng Angular của bạn,

14
00:01:06,630 --> 00:01:09,350
tải ứng dụng Angular vào trình duyệt và

15
00:01:09,350 --> 00:01:13,780
sau đó ứng dụng góc cạnh của họ sẽ trở nên sống động trong trình duyệt của họ.

16
00:01:14,810 --> 00:01:19,430
Chúng tôi cũng sẽ xem xét cách góc cạnh của nhắm mục tiêu các

17
00:01:19,430 --> 00:01:23,890
thiết bị di động trong hai khóa học tiếp theo, trong chuyên môn này.

18
00:01:23,890 --> 00:01:27,770
Vì vậy, tôi không nói cụ thể về điều đó, vào thời điểm này.

19
00:01:27,770 --> 00:01:32,180
Nhưng ở đây chúng ta đang nói về cách nhắm mục tiêu một cửa sổ trình duyệt web.

20
00:01:32,180 --> 00:01:35,150
Sử dụng mã ứng dụng Angular của bạn.

21
00:01:35,150 --> 00:01:38,050
Vì vậy, đến với câu hỏi làm thế nào để chúng tôi đóng gói

22
00:01:38,050 --> 00:01:40,090
ứng dụng Angular của chúng tôi để triển khai?

23
00:01:40,090 --> 00:01:47,850
Bây giờ chúng ta có thể sử dụng các kịch bản Gulp và NPM lớn cách làm điều đó, nếu bạn chọn.

24
00:01:47,850 --> 00:01:53,290
Nhưng có một đứa trẻ mới trong khối gọi là webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack như chúng ta sẽ hiểu khá sớm là một bundler mô-đun.

26
00:01:59,540 --> 00:02:03,040
Bây giờ, chúng ta sẽ xem xét một số chi tiết trong vài slide tiếp theo.

27
00:02:03,040 --> 00:02:08,150
Vì vậy, những gì webpack cho phép bạn làm là để đóng gói ứng dụng Angular của bạn theo cách

28
00:02:08,150 --> 00:02:11,720
mà nó rất dễ dàng để triển khai một trang web và

29
00:02:11,720 --> 00:02:15,470
làm cho ứng dụng Angular của bạn có sẵn cho người dùng.

30
00:02:15,470 --> 00:02:22,070
Bây giờ kể từ khi chúng tôi đang sử dụng Angular CLI để xây dựng ứng dụng Ang

31
00:02:22,070 --> 00:02:26,040
ular của chúng tôi, Angular CLI đã tận dụng webpack để

32
00:02:26,040 --> 00:02:32,010
thực hiện xây dựng của nó cho thư mục phân phối cho ứng dụng Angular của bạn.

33
00:02:32,010 --> 00:02:38,780
Vì vậy, chúng tôi không cần phải rõ ràng làm bất kỳ công việc bổ sung để sử dụng webpack.

34
00:02:38,780 --> 00:02:40,700
Một khi chúng tôi đang sử dụng Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Bởi vì CLI Angular sẽ chăm sóc tất cả các nâng nặng thay mặt cho chúng tôi.

36
00:02:45,870 --> 00:02:50,664
Vì vậy, nhưng trước khi chúng ta thấy những gì cách CLI góc xây dựng

37
00:02:50,664 --> 00:02:53,022
phân phối của bạn dễ dàng hơn nữa.

38
00:02:53,022 --> 00:02:57,162
Chúng ta cần phải hiểu một vài khái niệm về webpack và

39
00:02:57,162 --> 00:03:00,566
cách webpack hoạt động trong một chút chi tiết để

40
00:03:00,566 --> 00:03:06,270
khi Angular CLI tạo ra thư mục phân phối bạn có thể nhìn vào và

41
00:03:06,270 --> 00:03:10,410
xem chính xác những gì đang được xây dựng bởi Angular CLI.

42
00:03:10,410 --> 00:03:14,150
Vì vậy, mục tiêu của tôi về

43
00:03:14,150 --> 00:03:18,950
bài giảng đặc biệt này là chỉ cung cấp cho bạn một số tổng quan ngắn gọn về webpack.

44
00:03:18,950 --> 00:03:23,770
Bài giảng này không phải là một giới thiệu về cách sử dụng webpack.

45
00:03:23,770 --> 00:03:26,400
Đó là ngoài phạm vi của khóa học này, nhưng

46
00:03:26,400 --> 00:03:30,980
nếu bạn quan tâm, trang web webpacks

47
00:03:30,980 --> 00:03:36,280
có rất nhiều thông tin về cách webpack có thể được sử dụng cho các ứng dụng khác.

48
00:03:36,280 --> 00:03:39,800
Bạn có thể, về nguyên tắc, sử dụng webpack để đóng gói

49
00:03:41,350 --> 00:03:44,680
ứng dụng Bootstrap của bạn mà bạn đã phát triển trong khóa học trước đó cũng.

50
00:03:46,080 --> 00:03:50,680
Nhưng tại thời điểm này chúng ta sẽ xem xét làm thế nào chúng ta sử dụng webpack

51
00:03:51,840 --> 00:03:57,640
như là một phần của cách CLI góc xây dựng giải thích góc cạnh của chúng tôi.

52
00:03:59,640 --> 00:04:02,890
Vì vậy, rõ ràng câu hỏi đầu tiên nảy sinh trong tâm trí của bạn là,

53
00:04:02,890 --> 00:04:04,410
chính xác là webpack là gì?

54
00:04:04,410 --> 00:04:06,150
Chúng ta đang nói về cái gì vậy?

55
00:04:06,150 --> 00:04:12,850
Webpack, đây là định nghĩa từ tài liệu của webpack.

56
00:04:12,850 --> 00:04:19,130
Nó nói webpack là một trình đóng gói mô-đun cho các ứng dụng JavaScript hiện đại.

57
00:04:19,130 --> 00:04:21,723
Ứng dụng Angular của bạn mà bạn đã làm việc trên

58
00:04:21,723 --> 00:04:24,530
cho đến nay là một ứng dụng JavaScript hiện đại dễ dàng.

59
00:04:24,530 --> 00:04:29,590
Bây giờ tất cả các bạn đang làm việc với các cạnh cắt trong công nghệ Angular.

60
00:04:29,590 --> 00:04:35,170
Và như vậy, rõ ràng nó đủ điều kiện như là một ứng dụng JavaScript hiện đại và

61
00:04:35,170 --> 00:04:38,570
do đó, sử dụng webpack có ý nghĩa hoàn hảo.

62
00:04:38,570 --> 00:04:40,980
Bây giờ những gì webpack tốt nhất là,

63
00:04:40,980 --> 00:04:45,720
nó nhìn vào toàn bộ cấu trúc của ứng dụng Angular của bạn.

64
00:04:45,720 --> 00:04:50,610
Vì vậy, nó đệ quy đi qua mã của bạn của

65
00:04:50,610 --> 00:04:54,980
ứng dụng Angular của bạn tìm kiếm để xem làm thế nào tốt nhất để bó

66
00:04:54,980 --> 00:05:00,680
các thông tin vào những gì được gọi là bó.

67
00:05:00,680 --> 00:05:05,947
Khi webpack nhìn vào mã của bạn, nó xử lý mọi tập tin mà bạn

68
00:05:05,947 --> 00:05:12,735
có trong ứng dụng Angular của bạn, có thể là một JavaScript của tập tin Typescript, có

69
00:05:12,735 --> 00:05:17,319
thể là một tập tin CSS, có thể là một tập tin SAS, có thể là một tập tin hình ảnh.

70
00:05:17,319 --> 00:05:21,781
Bất cứ điều gì, nó đối xử với mỗi một trong số họ như

71
00:05:21,781 --> 00:05:25,438
là mô-đun từ quan điểm của nó, và sau đó nó quyết định, cách tốt nhất để đóng gói các

72
00:05:25,438 --> 00:05:30,790
mô-đun vào những gì được gọi là bó có thể được tải về từ.

73
00:05:30,790 --> 00:05:36,060
Máy chủ đến trình duyệt web của bạn một cách thoải mái và thuận tiện.

74
00:05:37,350 --> 00:05:42,820
Vì vậy, khi chúng ta nói về webpack chúng ta rõ ràng cần phải làm rõ những gì một bó có nghĩa là.

75
00:05:42,820 --> 00:05:47,315
Như tôi đã nói ngắn gọn trong slide trước đó, một bó không là gì ngoài

76
00:05:47,315 --> 00:05:51,155
một tập tin JavaScript kết hợp tài sản.

77
00:05:51,155 --> 00:05:56,130
Bây giờ, bạn phải giữ điều này trong tâm trí rằng webpack xử lý tất cả mọi thứ như JavaScript.

78
00:05:56,130 --> 00:06:02,410
Đối với nó cho dù đó là CSS hoặc bất kỳ loại tập tin khác,

79
00:06:02,410 --> 00:06:05,930
họ cũng sẽ được coi là JavaScript từ quan điểm của webpack.

80
00:06:05,930 --> 00:06:10,790
Bây giờ không nhận được quá quan tâm, webpack biết làm thế nào để đóng gói

81
00:06:10,790 --> 00:06:15,470
chúng và đối xử với chúng như là gói JavaScript nơi nó chuẩn bị những bó.

82
00:06:15,470 --> 00:06:19,740
Hoặc mô-đun JavaScript nơi nó chuẩn bị các bó.

83
00:06:19,740 --> 00:06:26,290
Vì vậy, một bó là một cái gì đó nhóm lại với nhau các mô-đun thuộc về nhau.

84
00:06:26,290 --> 00:06:29,010
Khi tôi nói về mô-đun tôi không ngụ ý mô-đun Angular,

85
00:06:29,010 --> 00:06:30,690
tôi không ngụ ý mô-đun JavaScript.

86
00:06:32,220 --> 00:06:36,170
Như tôi đã nói và Webpack, mỗi tập tin được tạo ra như một mô-đun.

87
00:06:36,170 --> 00:06:40,820
Và do đó, nó bó các mô-đun lại với nhau,

88
00:06:40,820 --> 00:06:46,160
mà nên được phục vụ cho khách hàng trong một phản ứng duy nhất cho một yêu cầu.

89
00:06:47,200 --> 00:06:51,740
Vì vậy, webpack chính nó đưa ra một quyết định về việc nói những

90
00:06:51,740 --> 00:06:55,070
phần nào nên được kết hợp với nhau thành một bó.

91
00:06:55,070 --> 00:06:59,000
Và nên được phân phối cùng nhau để hiển thị

92
00:06:59,000 --> 00:07:04,120
ứng dụng web của bạn được thực hiện một cách hiệu quả nhất.

93
00:07:04,120 --> 00:07:09,190
Bây giờ, Angular CLI đã xây dựng cấu hình của nó về cách tốt nhất để đóng gói

94
00:07:09,190 --> 00:07:17,370
Angular Assets, sao cho nó được giao thuận tiện nhất cho trình duyệt.

95
00:07:17,370 --> 00:07:21,550
Vì vậy, chúng tôi không cần phải lo lắng về làm thế nào để làm điều này cho mình,

96
00:07:21,550 --> 00:07:25,490
chúng tôi sẽ để nó để CLI góc logic để chăm sóc của tất cả các cấu hình

97
00:07:25,490 --> 00:07:29,540
như thế nào mà gói xây dựng nó là bó thay mặt cho chúng tôi.

98
00:07:29,540 --> 00:07:33,190
Vì vậy, những gì Webpack làm là, nó bắt đầu ở mức cao nhất.

99
00:07:33,190 --> 00:07:38,450
Trong ứng dụng Angular của bạn, mức cao nhất là các tệp index.html và main.js,

100
00:07:38,450 --> 00:07:43,930
như chúng ta đã học được trong bài học đầu tiên của khóa học này.

101
00:07:43,930 --> 00:07:49,170
Vì vậy, nó bắt đầu từ đó, và sau đó nó đi theo tất cả các đầu vào

102
00:07:49,170 --> 00:07:54,630
mà bạn sử dụng trong những cái đi xuống và

103
00:07:54,630 --> 00:08:00,760
đưa ra một tổ chức phân cấp của tất cả các phần khác nhau.

104
00:08:00,760 --> 00:08:06,110
Vì vậy, những gì được gọi là một đồ thị phụ thuộc được xây dựng bởi webpack.

105
00:08:06,110 --> 00:08:10,840
Bây giờ sử dụng đồ thị phụ thuộc này, Webpack sau đó quyết định làm thế nào để đóng

106
00:08:10,840 --> 00:08:15,810
gói nó của bó và hình ảnh một hoặc nhiều bó như họ có

107
00:08:15,810 --> 00:08:21,630
ý nghĩa cho ứng dụng cụ thể của bạn mà webpack là bó.

108
00:08:21,630 --> 00:08:27,690
Và trong quá trình thực hiện nó, khi nó đang xử lý các tập tin không phải JavaScript,

109
00:08:27,690 --> 00:08:34,440
như CSS, HTML và một SAS hoặc Images và vân vân.

110
00:08:34,440 --> 00:08:38,240
Sau đó, nó sử dụng các plugin cho phép bạn xử lý trước và

111
00:08:38,240 --> 00:08:41,910
sửa đổi các tập tin đó, những tập tin không phải JavaScript,

112
00:08:41,910 --> 00:08:46,970
thành một cách mà chúng có thể được đóng gói vào các gói webpack của bạn.

113
00:08:49,082 --> 00:08:52,070
Nếu bạn đang sử dụng webpack từ đầu,

114
00:08:52,070 --> 00:08:57,510
sau đó bạn sẽ mô tả một số cấu hình cho webpack của bạn để làm việc.

115
00:08:57,510 --> 00:09:00,775
Trên các tập tin này trong một tập tin có tên là

116
00:09:00,775 --> 00:09:06,810
webpack.config.js mà chúng tôi bao gồm trong thư mục gốc của ứng dụng của bạn.

117
00:09:06,810 --> 00:09:11,640
Trong trường hợp của chúng tôi kể từ khi chúng tôi đang dựa vào góc CLI để làm điều này thay mặt cho chúng tôi

118
00:09:11,640 --> 00:09:16,470
Angular CLI tự động nhấp vào đây tại xây dựng cấu hình cho

119
00:09:16,470 --> 00:09:18,300
webpack để làm việc với.

120
00:09:18,300 --> 00:09:23,260
Bây giờ khi chúng ta nói về webpack, có bốn khái niệm quan trọng đối với

121
00:09:23,260 --> 00:09:26,660
chúng ta để hiểu về cách webpack hoạt động trên bức ảnh.

122
00:09:26,660 --> 00:09:28,740
Đầu tiên là mục nhập.

123
00:09:28,740 --> 00:09:33,560
Mục nhập là điểm mà webpack nên bắt đầu và

124
00:09:33,560 --> 00:09:36,350
làm theo để xây dựng đồ thị phụ thuộc.

125
00:09:36,350 --> 00:09:40,260
Vì vậy, tệp.tệp.tốt.ví dụ, là một điểm nhập cảnh.

126
00:09:40,260 --> 00:09:44,490
Vì vậy, webpack có thể bắt đầu nó đuổi theo trong việc xây dựng đồ thị phụ thuộc.

127
00:09:44,490 --> 00:09:50,860
Ngay tại main.t và sau đó đi đuổi sau khi tất cả các báo cáo nhập khẩu từ đó

128
00:09:50,860 --> 00:09:56,160
đến các tập tin khác của họ và sau đó từ đó họ nhập khẩu các tập tin và

129
00:09:56,160 --> 00:10:01,490
như vậy trên tất cả các cách xuống cho đến khi nó xây dựng lên đồ thị phụ thuộc.

130
00:10:02,930 --> 00:10:06,660
Bây giờ, phần thứ hai là cái mà chúng ta gọi là đầu ra.

131
00:10:06,660 --> 00:10:11,200
Trong webpack đầu ra là tập hợp các gói mà webpack chuẩn bị

132
00:10:11,200 --> 00:10:11,740
thay mặt cho bạn.

133
00:10:12,890 --> 00:10:15,590
Thứ ba là bộ nạp.

134
00:10:15,590 --> 00:10:18,950
Bây giờ webpack như tôi đã nói chỉ hiểu JavaScript và

135
00:10:18,950 --> 00:10:21,540
nó chỉ biết làm thế nào để làm việc với JavaScript.

136
00:10:21,540 --> 00:10:26,250
Nhưng như tôi cũng đã đề cập, webpack xử lý mọi tập tin như một mô-đun.

137
00:10:26,250 --> 00:10:31,660
Vì vậy, những tập tin mà không phải là JavaScript họ phải được

138
00:10:31,660 --> 00:10:36,870
chuyển đổi và sau đó đưa vào bó của bạn bằng cách sử dụng

139
00:10:36,870 --> 00:10:42,300
biến đổi thích hợp và sau đó họ sẽ được thêm vào đồ thị phụ thuộc của bạn.

140
00:10:42,300 --> 00:10:45,420
Đây là nơi mà việc sử dụng các plugin khác nhau đi vào.

141
00:10:45,420 --> 00:10:47,320
Plugin giúp bạn làm gì?

142
00:10:47,320 --> 00:10:51,920
Các plugin giúp bạn thực hiện các hành động khác nhau và chức năng tùy chỉnh

143
00:10:51,920 --> 00:10:58,020
hoặc biên dịch mà bạn cần thực hiện để xây dựng gói của bạn.

144
00:10:58,020 --> 00:11:02,820
Vì vậy, nó sẽ giúp bạn chuyển đổi CSS của bạn thành một cách mà tôi có thể đóng

145
00:11:02,820 --> 00:11:06,830
gói vào các gói JavaScript của bạn, và như vậy.

146
00:11:06,830 --> 00:11:12,570
Vì vậy, đó là một giới thiệu nhanh chóng về cách webpack thực sự hoạt động.

147
00:11:12,570 --> 00:11:17,420
Bây giờ với sự giới thiệu nhanh chóng đó, trong bài tập tiếp theo, bạn sẽ

148
00:11:17,420 --> 00:11:22,750
thấy rằng chúng tôi sẽ thuận tiện sử dụng một lệnh gọi là ng

149
00:11:22,750 --> 00:11:28,360
build để xây dựng thư mục phân phối của chúng tôi cho ứng dụng Angular của chúng tôi.

150
00:11:28,360 --> 00:11:31,690
Ng build cho phép bạn thậm chí xây dựng một phiên bản phát triển hoặc phiên

151
00:11:33,380 --> 00:11:36,440
bản sản xuất của ứng dụng Angular của bạn.

152
00:11:36,440 --> 00:11:38,790
Khi chúng tôi sử dụng ng lướt,

153
00:11:38,790 --> 00:11:43,270
CLI góc đã thực sự sử dụng webpack để đóng gói mọi thứ.

154
00:11:43,270 --> 00:11:44,350
Vì vậy, nếu bạn quay trở lại và

155
00:11:44,350 --> 00:11:50,630
nhìn vào tất cả những thứ đã được in trong cửa sổ thiết bị đầu cuối của

156
00:11:50,630 --> 00:11:55,910
bạn, bạn sẽ bắt đầu thấy webpack làm việc đằng sau hậu trường để thực hiện các bó.

157
00:11:57,070 --> 00:12:01,760
Bây giờ trong bài tập tiếp theo, bạn sẽ xây dựng thư mục phân phối của họ,

158
00:12:01,760 --> 00:12:08,840
sau đó có thể được sao chép vào trang web của bạn và sau đó triển khai ứng dụng Angular của bạn.

159
00:12:08,840 --> 00:12:12,020
Bây giờ tôi đã thực hiện một xây dựng

160
00:12:12,020 --> 00:12:15,570
của ứng dụng Angular mà chúng tôi đã xây dựng cho đến nay.

161
00:12:15,570 --> 00:12:20,380
Vì vậy, chúng ta hãy đi và xem nhanh thư mục phân phối để xem những gì có trong

162
00:12:20,380 --> 00:12:24,370
đó trước khi bạn thực sự thực hiện bài tập.

163
00:12:24,370 --> 00:12:28,520
Vì vậy, một khi bạn hoàn thành bài tập, tôi sẽ khuyên bạn nên đi và

164
00:12:28,520 --> 00:12:36,140
nhìn vào thư mục đĩa đã được xây dựng trong thư mục dự án ứng dụng Angular của bạn.

165
00:12:36,140 --> 00:12:40,940
Và sau đó nhìn và xem chính xác các tập tin mà tôi sẽ cho các bạn xem ngay bây giờ.

166
00:12:40,940 --> 00:12:44,020
Ngay trong thư mục phân phối.

167
00:12:44,020 --> 00:12:50,890
Đi đến ứng dụng Angular của chúng tôi trong Visual Studio ở đây,

168
00:12:50,890 --> 00:12:53,950
bạn thấy rằng tôi đang mở thư mục phân phối.

169
00:12:53,950 --> 00:12:58,260
Và bên trong thư mục phân phối, bạn sẽ thấy một loạt các tập tin ở đây.

170
00:12:58,260 --> 00:13:03,905
Bạn sẽ thấy một tập tin có tên chính một chuỗi dài nơi

171
00:13:03,905 --> 00:13:09,890
.bundle.js từ kiến thức của bạn về Gulp và Grunt từ khóa học trước đó,

172
00:13:09,890 --> 00:13:14,620
bạn sẽ bắt đầu xem chuỗi dài trung gian đó có nghĩa là gì.

173
00:13:14,620 --> 00:13:19,830
Đó là cách bạn thêm phiên bản đó vào ứng dụng của bạn.

174
00:13:19,830 --> 00:13:25,310
Tương tự như vậy bạn thấy một tập tin khác gọi là styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Sau đó, bạn sẽ thấy một vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
Và sau đó là polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Sau đó, bạn có một tập tin index.html, và

178
00:13:34,300 --> 00:13:37,350
bạn đang tự hỏi điều gì đã xảy ra với tất cả các mã HTML của bạn?

179
00:13:37,350 --> 00:13:39,970
Nó ở trong một trong những bó đó, được rồi.

180
00:13:39,970 --> 00:13:43,610
Vì vậy, tất cả các mẫu mà bạn đã viết là tất cả có trong một trong những bó,

181
00:13:43,610 --> 00:13:45,670
ngoại trừ trang index.html.

182
00:13:45,670 --> 00:13:51,206
Bạn cần trang index.html

183
00:13:51,206 --> 00:13:54,348
một cách rõ ràng vì, khi người dùng nhập URL cho

184
00:13:54,348 --> 00:13:59,024
trang web của bạn vào thanh địa chỉ trình duyệt.

185
00:13:59,024 --> 00:14:01,624
Sau đó, bạn sẽ hạ cánh tại trang web của bạn và

186
00:14:01,624 --> 00:14:05,362
các trang HTML chấm chỉ mục nơi bạn bắt đầu tất cả mọi thứ và

187
00:14:05,362 --> 00:14:11,400
bạn cần rằng để bootstrap ứng dụng Angular của bạn để đó là lý do tại sao đó là ở đó.

188
00:14:11,400 --> 00:14:16,170
Và sau đó bạn cũng thấy các tập tin fontawesome ở đó là cần thiết và

189
00:14:16,170 --> 00:14:21,340
rằng bên trong tài sản bạn thấy một số hình ảnh ở đó, trong thư mục tài sản.

190
00:14:22,530 --> 00:14:28,980
Vì vậy, tham gia một cái nhìn nhanh vào tập tin chính, bạn sẽ thấy rằng đây là

191
00:14:28,980 --> 00:14:35,185
như bạn có thể thấy là một tập hợp nhiều tập tin nén nối các tập tin.

192
00:14:35,185 --> 00:14:40,025
Bây giờ, nếu bạn cố gắng đọc nó, nó sẽ không dễ dàng,

193
00:14:40,025 --> 00:14:42,455
nó là một tập tin khổng lồ với rất nhiều thứ.

194
00:14:42,455 --> 00:14:46,695
Điều này cũng bao gồm tất cả các mã khung góc,

195
00:14:46,695 --> 00:14:49,140
một bàn tay mã của bạn mà bạn đã viết.

196
00:14:49,140 --> 00:14:53,980
Và mã xuất phát từ vật liệu góc, Flex Layout và

197
00:14:53,980 --> 00:14:58,460
mọi thứ khác mà bạn bao gồm trong ứng dụng Angular của bạn.

198
00:14:58,460 --> 00:15:02,480
Tương tự như vậy, bạn có polyfills và sau đó phong cách và

199
00:15:02,480 --> 00:15:07,130
bạn bắt đầu thấy rằng tất cả những điều mà bạn sử dụng trong

200
00:15:07,130 --> 00:15:10,870
ứng dụng Angular của bạn đã được đóng gói với nhau vào các tập tin đó.

201
00:15:12,270 --> 00:15:17,220
Vì vậy, với điều này tôi hy vọng bạn có một cái nhìn tổng quan nhanh chóng của webpack.

202
00:15:17,220 --> 00:15:21,100
Bây giờ là thời gian để chúng tôi đi đến bài tập, nơi chúng tôi sẽ chỉ đơn giản là sử dụng

203
00:15:21,100 --> 00:15:26,660
Angular CLI ng build lệnh để xây dựng thư mục phân phối này.

204
00:15:26,660 --> 00:15:30,810
Và bạn sẽ thấy cách bạn có thể triển khai ứng dụng Angular của bạn vào một trang web.

205
00:15:31,870 --> 00:15:37,329
Ngay sau khi bạn hoàn thành bản dựng.

206
00:15:37,329 --> 00:15:39,969
[ NHẠC]