[МУЗЫКА]
В предыдущем курсе на Bootstrap 4
мы узнали, как использовать скрипты NPM или Grunt или
Gulp для создания папки дистрибутива для нашего веб-приложения.
Итак, мы увидели, как строится папка дистрибутива, взяв все файлы HTML,
CSS и JavaScript.
А затем делать модификацию, углификацию, конкатенацию,
и различные другие преобразования на них, чтобы создать файлы распространения, которые могут быть
просто скопированы на сервер, а затем сделать ваш сайт доступным для пользователей.
Теперь, как насчет вашего углового приложения?
Как мы упаковываем наше угловое приложение для развертывания его на веб-сайте?
Теперь, когда вы понимаете, что ваше угловое приложение также в конечном счете будет развернуто на веб-сайте, откуда люди будут получать доступ к вашему угловому приложению,
скачать угловое приложение в браузер и
тогда их угловое приложение оживет в их браузерах.
Мы также посмотрим на угловой способ таргетинга
мобильных устройств в следующих двух курсах, в этой специализации.
Так что я не говорю конкретно об этом, в данный момент.
Но здесь мы говорим о том, как настроить таргетинг окна веб-браузера.
Использование кода углового приложения.
Итак, переходим к вопросу о том, как мы упаковываем наше приложение Angular
для развертывания?
Теперь мы могли бы использовать грандиозные скрипты Gulp и NPM, если вы решите.
Но в блоке появился новый ребенок, называемый webpack.
Webpack, как мы бы поняли, довольно скоро является модулем bundler.
Теперь мы рассмотрим некоторые детали в следующей паре слайдов.
Итак, что webpack позволяет вам сделать, это упаковать ваше угловое приложение таким образом
, что его легко развернуть на веб-сайте и
сделать ваше угловое приложение доступным для пользователей.
Теперь, поскольку мы используем угловой интерфейс командной строки для создания нашего углового приложения,
Angular CLI уже использует webpack для
, делая его построение для папки распространения для вашего углового приложения.
Поэтому нам не нужно явно делать какую-либо дополнительную работу, чтобы использовать webpack.
После того, как мы используем угловой интерфейс командной строки.
Потому что Angular CLI заботится обо всем тяжелом подъеме от нашего имени.
Итак, но прежде чем мы увидим, что Угловые CLI способ построения вашего дистрибутива
дальнейшее облегчение.
Нам нужно понять несколько концепций о webpack и
как webpack работает в немного деталях, так что
, когда Angular CLI создает папку дистрибутива, вы можете посмотреть и
увидеть, что именно строится Angular CLI.
Поэтому моя цель этой конкретной лекции
- дать вам краткий обзор webpack.
Эта лекция не является введением в использование webpack.
Это выходит за рамки данного курса, но
если вас интересует сайт webpacks
имеет много информации о том, как webpack может быть использован для других приложений.
Вы можете, в принципе, использовать webpack для упаковки вашего приложения Bootstrap
, которое вы также разработали в предыдущем курсе.
Но в этот момент мы рассмотрим, как мы используем webpack
как часть способа построения угловой интерпретации CLI.
Итак, очевидно, первый вопрос, который возникает в вашем сознании, -
, что именно такое webpack?
О чем мы говорим?
Webpack, это определение из самой документации webpack.
Он говорит, что webpack - это модульный пакет для современных приложений JavaScript.
Ваше угловое приложение, над которым вы работали до сих пор
, является простым современным приложением JavaScript.
Теперь вы все работаете с передовыми технологиями Angular.
И поэтому, очевидно, он квалифицируется как современное приложение JavaScript, и
, следовательно, использование webpack имеет смысл.
Теперь, какой webpack лучше всего,
он смотрит на всю структуру вашего углового приложения.
Таким образом, он рекурсивно проходит через ваш код вашего приложения Angular
, чтобы увидеть, как лучше всего связывает
информацию в то, что называется связками.
Когда webpack смотрит на ваш код, он обрабатывает каждый файл, который у вас
есть в вашем угловом приложении, будь то JavaScript файла Typescript,
будь то файл CSS, будь то файл SAS, будь то файл изображения.
Как бы то ни было, он рассматривает каждый из них как модули с точки зрения
, а затем он решает, что является лучшим способом упаковки этих
модулей в то, что называется пакетами, которые могут быть загружены из.
Сервер для вашего веб-браузера в удобной и удобной манере.
Поэтому, когда мы говорим о webpack, нам, очевидно, нужно уточнить, что означает пакет.
Как я кратко сказал в предыдущем слайде, пакет - это не что иное, как
файл JavaScript, который включает активы.
Теперь вы должны иметь в виду, что webpack рассматривает все как JavaScript.
Для него будь то CSS или любой из других типов файлов,
они также будут рассматриваться как JavaScript с точки зрения webpack.
Теперь не беспокойтесь, webpack знает, как упаковать их, и
обрабатывает их как пакеты JavaScript, где он готовит эти пакеты.
Или JavaScript модули, где он готовит эти пакеты.
Таким образом, пакет - это то, что группируется вместе модули, которые принадлежат друг другу.
Когда я говорю о модуле, я не подразумеваю угловой модуль,
Я не подразумеваю модуль JavaScript.
Как я уже сказал и Webpack, каждый файл создается как модуль.
И поэтому он связывает эти модули вместе,
, которые должны быть поданы клиенту в одном ответе на запрос.
Таким образом webpack сам принимает решение о том, что
части должны быть объединены в связку.
И должны быть доставлены вместе, чтобы рендеринг вашего
веб-приложения был выполнен наиболее эффективным образом.
Теперь, Angular CLI уже построил свою конфигурацию того, как лучше всего упаковать
Angular Assets, так что он наиболее удобно доставляется в браузер.
Поэтому нам не нужно беспокоиться о том, как это сделать сами,
мы оставим его угловой логике CLI, чтобы позаботиться обо всей этой конфигурации
, как этот пакет строит свои пакеты от нашего имени.
Итак, что делает Webpack, он начинается на самом верхнем уровне.
В вашем угловом приложении самый верхний уровень - index.html и main.js файлы,
, как мы узнали на самом первом уроке этого курса.
Таким образом, он начинается там, а затем он следует за всеми входами
, которые вы используете в тех, которые вниз по пути и
вызывает иерархическую организацию всех различных частей.
Итак, что называется графом зависимостей, построено webpack.
Теперь, используя этот график зависимостей, Webpack затем решает, как
упаковать его пакеты и что изображения одного или нескольких пакетов, поскольку они имеют смысл
для вашего конкретного приложения, что webpack является пакетом.
И в процессе этого, когда он обрабатывает не-JavaScript файлы,
как CSS, HTML и SAS или Images и так далее.
Затем он использует плагины, которые позволяют предварительно обрабатывать и
изменять эти файлы, те файлы, не относящиеся к JavaScript,
таким образом, чтобы они могли быть объединены в ваши пакеты webpack.
Если вы используете webpack с нуля,
, то вы бы описали некоторые конфигурации для работы вашего webpack.
На этих файлах в файле с именем
webpack.config.js, который мы включили в корневую папку вашего приложения.
В нашем случае, поскольку мы полагаемся на Angular CLI, чтобы сделать это от нашего имени
Угловой CLI автоматически нажимает здесь при построении конфигурации для
webpack для работы с.
Теперь, когда мы говорим о webpack, есть четыре понятия, которые важны для
нас, чтобы понять, как webpack работает на фото.
Первый вход.
Entry - это точка, с которой webpack должен начинаться и
следовать вниз, чтобы построить граф зависимостей.
Итак, файл main.ts, например, является точкой входа.
Таким образом, webpack может начать погоню в построении графика зависимостей.
Прямо на main.ts, а затем идти преследовать после всех операторов импорта оттуда
в их другие файлы, а затем оттуда они импортируют эти файлы и
так далее до тех пор, пока он не создаст график зависимостей.
Теперь вторая часть - это то, что мы называем выходным.
В webpack вывод - это набор пакетов, которые webpack готовит
от вашего имени.
Третий - погрузчики.
Теперь webpack, как я уже сказал, понимает только JavaScript и
он знает только, как работать с JavaScript.
Но, как я также упомянул, webpack рассматривает каждый файл как модуль.
Таким образом, те файлы, которые не являются JavaScript, они должны быть преобразованы
, а затем помещены в ваши пакеты, используя соответствующие преобразования
, а затем они будут добавлены в ваш график зависимостей.
Вот где используются различные плагины.
Что вам помогают плагины?
Плагины помогают вам выполнять различные действия и пользовательские функции
или компиляции, которые вам нужно сделать для создания ваших пакетов.
Таким образом, это поможет вам преобразовать ваш CSS в способ, который я могу пакет
в ваши пакеты JavaScript и так далее.
Так что это краткое введение в то, как на самом деле работает webpack.
Теперь с этим быстрым введением, в следующем упражнении вы увидите
, что мы будем удобно использовать команду ng
build для создания нашей папки дистрибутива для нашего углового приложения.
Ng build позволяет даже создавать версию разработки или
производственной версии вашего Angular приложения.
Когда мы использовали ng surf,
Угловой CLI действительно использовал webpack для упаковки вещей.
Поэтому, если вы вернетесь назад и
посмотрите на все вещи, которые были напечатаны в окне терминала,
вы начнете видеть, как webpack работает за кулисами, чтобы сделать пакеты.
Теперь в следующем упражнении вы создадите их папку дистрибутива
, которую затем можно скопировать на ваш сайт, а затем развернуть приложение Angular.
Теперь я уже сделал одну сборку
углового приложения, которое мы построили до сих пор.
Итак, давайте пойдем и быстро посмотрим на папку дистрибутива, чтобы увидеть, что находится в
, прежде чем вы действительно выполните упражнение.
Поэтому, как только вы завершите упражнение, я бы настоятельно посоветовал вам пойти и
посмотреть на папку диска, которая была построена в папке проекта Angular приложений.
А затем посмотрите и посмотрите именно те файлы, которые я вам сейчас покажу.
Прямо в папке дистрибутива.
Перейдя в наше угловое приложение в Visual Studio здесь,
вы видите, что я теперь открываю папку дистрибутива.
И внутри папки дистрибутива вы увидите здесь целую кучу файлов.
Вы увидите файл с именем main длинная строка, где
.bundle.js из ваших знаний Gulp и Grunt из предыдущего курса,
вы начнете видеть, что означает эта промежуточная длинная строка.
Вот как вы добавляете эту версию в свое приложение.
Точно так же вы видите другой файл под названием styles.something.css.
Тогда вы видите vendor.bundle.js.
А потом polyfills.js.
Тогда у вас есть файл index.html, и
вам интересно, что случилось со всем вашим HTML-кодом?
Это в одном из этих пучков, хорошо.
Таким образом, все шаблоны, которые вы написали, находятся в одном из этих пакетов,
, кроме страницы index.html.
Вам нужна страница index.html явно, потому что
, когда пользователь вводит URL-адрес для
вашего сайта в адресную строку браузера.
Тогда вы приземлитесь на своем сайте и
индекс точки HTML страниц, где вы начинаете все, и
вам нужно, чтобы загрузить ваше угловое приложение, так вот почему это есть.
А затем вы также видите fontawesome файлы там, которые необходимы и
, что внутри актива вы видите некоторые изображения там, в папке активов.
Итак, быстро взглянув на основной файл, вы увидите, что это
, как вы можете видеть, это много файлов, сжатых конкатенированный набор файлов.
Теперь, если вы попытаетесь прочитать это, это будет нелегко,
это огромный файл с большим количеством вещей.
Это также включает в себя все угловые фреймворки код,
руку ваш код, который вы написали.
И код, который приходит из углового материала, Flex Layout и
все другие вещи, которые вы включили в ваше приложение Angular.
Аналогично, у вас есть полизаливки, а затем стили и
вы начинаете видеть, что все вещи, которые вы используете в приложении Angular
, были объединены в эти файлы там.
Так что с этим я надеюсь, что вы получили быстрый обзор webpack.
Теперь настало время для нас, чтобы перейти к упражнению, где мы просто используем команду
Angular CLI ng build, чтобы построить эту папку дистрибутива.
И вы увидите, как вы можете развернуть свое угловое приложение на веб-сайте.
Сразу после завершения сборки.
[МУЗЫКА]