[MUSIC]
Trong khóa học trước đó trên Bootstrap 4,
chúng tôi đã học cách sử dụng các kịch bản NPM hoặc Grunt hoặc
Gulp để xây dựng thư mục phân phối cho ứng dụng web của chúng tôi.
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
tệp HTML, CSS và JavaScript.
Và sau đó thực hiện sửa đổi, uglification, nối
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
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.
Bây giờ, còn ứng dụng Angular của bạn thì sao?
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?
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
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,
tải ứng dụng Angular vào trình duyệt và
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ọ.
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
thiết bị di động trong hai khóa học tiếp theo, trong chuyên môn này.
Vì vậy, tôi không nói cụ thể về điều đó, vào thời điểm này.
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.
Sử dụng mã ứng dụng Angular của bạn.
Vì vậy, đến với câu hỏi 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?
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.
Nhưng có một đứa trẻ mới trong khối gọi là webpack.
Webpack như chúng ta sẽ hiểu khá sớm là một bundler mô-đun.
Bây giờ, chúng ta sẽ xem xét một số chi tiết trong vài slide tiếp theo.
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
mà nó rất dễ dàng để triển khai một trang web và
làm cho ứng dụng Angular của bạn có sẵn cho người dùng.
Bây giờ kể từ khi chúng tôi đang sử dụng Angular CLI để xây dựng ứng dụng Ang
ular của chúng tôi, Angular CLI đã tận dụng webpack để
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.
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.
Một khi chúng tôi đang sử dụng Angular CLI.
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.
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
phân phối của bạn dễ dàng hơn nữa.
Chúng ta cần phải hiểu một vài khái niệm về webpack và
cách webpack hoạt động trong một chút chi tiết để
khi Angular CLI tạo ra thư mục phân phối bạn có thể nhìn vào và
xem chính xác những gì đang được xây dựng bởi Angular CLI.
Vì vậy, mục tiêu của tôi về
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.
Bài giảng này không phải là một giới thiệu về cách sử dụng webpack.
Đó là ngoài phạm vi của khóa học này, nhưng
nếu bạn quan tâm, trang web webpacks
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.
Bạn có thể, về nguyên tắc, sử dụng webpack để đóng gói
ứng dụng Bootstrap của bạn mà bạn đã phát triển trong khóa học trước đó cũng.
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
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.
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à,
chính xác là webpack là gì?
Chúng ta đang nói về cái gì vậy?
Webpack, đây là định nghĩa từ tài liệu của webpack.
Nó nói webpack là một trình đóng gói mô-đun cho các ứng dụng JavaScript hiện đại.
Ứng dụng Angular của bạn mà bạn đã làm việc trên
cho đến nay là một ứng dụng JavaScript hiện đại dễ dàng.
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.
Và như vậy, rõ ràng nó đủ điều kiện như là một ứng dụng JavaScript hiện đại và
do đó, sử dụng webpack có ý nghĩa hoàn hảo.
Bây giờ những gì webpack tốt nhất là,
nó nhìn vào toàn bộ cấu trúc của ứng dụng Angular của bạn.
Vì vậy, nó đệ quy đi qua mã của bạn của
ứng dụng Angular của bạn tìm kiếm để xem làm thế nào tốt nhất để bó
các thông tin vào những gì được gọi là bó.
Khi webpack nhìn vào mã của bạn, nó xử lý mọi tập tin mà bạn
có trong ứng dụng Angular của bạn, có thể là một JavaScript của tập tin Typescript, có
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.
Bất cứ điều gì, nó đối xử với mỗi một trong số họ như
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
mô-đun vào những gì được gọi là bó có thể được tải về từ.
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.
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à.
Như tôi đã nói ngắn gọn trong slide trước đó, một bó không là gì ngoài
một tập tin JavaScript kết hợp tài sản.
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.
Đối với nó cho dù đó là CSS hoặc bất kỳ loại tập tin khác,
họ cũng sẽ được coi là JavaScript từ quan điểm của webpack.
Bây giờ không nhận được quá quan tâm, webpack biết làm thế nào để đóng gói
chúng và đối xử với chúng như là gói JavaScript nơi nó chuẩn bị những bó.
Hoặc mô-đun JavaScript nơi nó chuẩn bị các bó.
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.
Khi tôi nói về mô-đun tôi không ngụ ý mô-đun Angular,
tôi không ngụ ý mô-đun JavaScript.
Như tôi đã nói và Webpack, mỗi tập tin được tạo ra như một mô-đun.
Và do đó, nó bó các mô-đun lại với nhau,
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.
Vì vậy, webpack chính nó đưa ra một quyết định về việc nói những
phần nào nên được kết hợp với nhau thành một bó.
Và nên được phân phối cùng nhau để hiển thị
ứng dụng web của bạn được thực hiện một cách hiệu quả nhất.
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
Angular Assets, sao cho nó được giao thuận tiện nhất cho trình duyệt.
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,
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
như thế nào mà gói xây dựng nó là bó thay mặt cho chúng tôi.
Vì vậy, những gì Webpack làm là, nó bắt đầu ở mức cao nhất.
Trong ứng dụng Angular của bạn, mức cao nhất là các tệp index.html và main.js,
như chúng ta đã học được trong bài học đầu tiên của khóa học này.
Vì vậy, nó bắt đầu từ đó, và sau đó nó đi theo tất cả các đầu vào
mà bạn sử dụng trong những cái đi xuống và
đưa ra một tổ chức phân cấp của tất cả các phần khác nhau.
Vì vậy, những gì được gọi là một đồ thị phụ thuộc được xây dựng bởi webpack.
Bây giờ sử dụng đồ thị phụ thuộc này, Webpack sau đó quyết định làm thế nào để đóng
gói nó của bó và hình ảnh một hoặc nhiều bó như họ có
ý nghĩa cho ứng dụng cụ thể của bạn mà webpack là bó.
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,
như CSS, HTML và một SAS hoặc Images và vân vân.
Sau đó, nó sử dụng các plugin cho phép bạn xử lý trước và
sửa đổi các tập tin đó, những tập tin không phải JavaScript,
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.
Nếu bạn đang sử dụng webpack từ đầu,
sau đó bạn sẽ mô tả một số cấu hình cho webpack của bạn để làm việc.
Trên các tập tin này trong một tập tin có tên là
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.
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
Angular CLI tự động nhấp vào đây tại xây dựng cấu hình cho
webpack để làm việc với.
Bây giờ khi chúng ta nói về webpack, có bốn khái niệm quan trọng đối với
chúng ta để hiểu về cách webpack hoạt động trên bức ảnh.
Đầu tiên là mục nhập.
Mục nhập là điểm mà webpack nên bắt đầu và
làm theo để xây dựng đồ thị phụ thuộc.
Vì vậy, tệp.tệp.tốt.ví dụ, là một điểm nhập cảnh.
Vì vậy, webpack có thể bắt đầu nó đuổi theo trong việc xây dựng đồ thị phụ thuộc.
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ừ đó
đế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à
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.
Bây giờ, phần thứ hai là cái mà chúng ta gọi là đầu ra.
Trong webpack đầu ra là tập hợp các gói mà webpack chuẩn bị
thay mặt cho bạn.
Thứ ba là bộ nạp.
Bây giờ webpack như tôi đã nói chỉ hiểu JavaScript và
nó chỉ biết làm thế nào để làm việc với JavaScript.
Nhưng như tôi cũng đã đề cập, webpack xử lý mọi tập tin như một mô-đun.
Vì vậy, những tập tin mà không phải là JavaScript họ phải được
chuyển đổi và sau đó đưa vào bó của bạn bằng cách sử dụng
biến đổi thích hợp và sau đó họ sẽ được thêm vào đồ thị phụ thuộc của bạn.
Đây là nơi mà việc sử dụng các plugin khác nhau đi vào.
Plugin giúp bạn làm gì?
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
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.
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
gói vào các gói JavaScript của bạn, và như vậy.
Vì vậy, đó là một giới thiệu nhanh chóng về cách webpack thực sự hoạt động.
Bây giờ với sự giới thiệu nhanh chóng đó, trong bài tập tiếp theo, bạn sẽ
thấy rằng chúng tôi sẽ thuận tiện sử dụng một lệnh gọi là ng
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.
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
bản sản xuất của ứng dụng Angular của bạn.
Khi chúng tôi sử dụng ng lướt,
CLI góc đã thực sự sử dụng webpack để đóng gói mọi thứ.
Vì vậy, nếu bạn quay trở lại và
nhìn vào tất cả những thứ đã được in trong cửa sổ thiết bị đầu cuối của
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ó.
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ọ,
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.
Bây giờ tôi đã thực hiện một xây dựng
của ứng dụng Angular mà chúng tôi đã xây dựng cho đến nay.
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
đó trước khi bạn thực sự thực hiện bài tập.
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à
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.
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ờ.
Ngay trong thư mục phân phối.
Đi đến ứng dụng Angular của chúng tôi trong Visual Studio ở đây,
bạn thấy rằng tôi đang mở thư mục phân phối.
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.
Bạn sẽ thấy một tập tin có tên chính một chuỗi dài nơi
.bundle.js từ kiến thức của bạn về Gulp và Grunt từ khóa học trước đó,
bạn sẽ bắt đầu xem chuỗi dài trung gian đó có nghĩa là gì.
Đó là cách bạn thêm phiên bản đó vào ứng dụng của bạn.
Tương tự như vậy bạn thấy một tập tin khác gọi là styles.something.css.
Sau đó, bạn sẽ thấy một vendor.bundle.js.
Và sau đó là polyfills.js.
Sau đó, bạn có một tập tin index.html, và
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?
Nó ở trong một trong những bó đó, được rồi.
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ó,
ngoại trừ trang index.html.
Bạn cần trang index.html
một cách rõ ràng vì, khi người dùng nhập URL cho
trang web của bạn vào thanh địa chỉ trình duyệt.
Sau đó, bạn sẽ hạ cánh tại trang web của bạn và
các trang HTML chấm chỉ mục nơi bạn bắt đầu tất cả mọi thứ và
bạn cần rằng để bootstrap ứng dụng Angular của bạn để đó là lý do tại sao đó là ở đó.
Và sau đó bạn cũng thấy các tập tin fontawesome ở đó là cần thiết và
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.
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à
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.
Bây giờ, nếu bạn cố gắng đọc nó, nó sẽ không dễ dàng,
nó là một tập tin khổng lồ với rất nhiều thứ.
Điều này cũng bao gồm tất cả các mã khung góc,
một bàn tay mã của bạn mà bạn đã viết.
Và mã xuất phát từ vật liệu góc, Flex Layout và
mọi thứ khác mà bạn bao gồm trong ứng dụng Angular của bạn.
Tương tự như vậy, bạn có polyfills và sau đó phong cách và
bạn bắt đầu thấy rằng tất cả những điều mà bạn sử dụng trong
ứng dụng Angular của bạn đã được đóng gói với nhau vào các tập tin đó.
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.
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
Angular CLI ng build lệnh để xây dựng thư mục phân phối này.
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.
Ngay sau khi bạn hoàn thành bản dựng.
[ NHẠC]