[MÚSICA]
No curso anterior no Bootstrap 4,
aprendemos como fazer uso de scripts NPM ou Grunt ou
Gulp para construir a pasta de distribuição para nosso aplicativo web.
Então, vimos como a pasta de distribuição é construída tomando todos os arquivos HTML,
CSS e JavaScript.
E então fazendo modificação, uglification, concatenação,
e várias outras transformações neles para construir arquivos de distribuição que podem ser
simplesmente copiados para o servidor e, em seguida, tornar seu site disponível para os usuários.
Agora, e o seu aplicativo Angular?
Como empacotamos nosso aplicativo Angular para implantá-lo em um site?
Agora, como você percebe seu aplicativo angular também vai ser
implantado em um site de onde as pessoas vão acessar seu aplicativo Angular,
baixar o aplicativo Angular para o navegador e
então sua aplicação angular vai ganhar vida em seus navegadores.
Vamos, também olhar para a maneira angular de segmentar
dispositivos móveis nos próximos dois cursos, nesta especialização.
Então eu não estou falando especificamente sobre isso, neste momento.
Mas aqui estamos falando sobre como segmentar uma janela do navegador web.
Usando seu código de aplicativo Angular.
Então, chegando à questão de como empacotamos nosso aplicativo Angular
para implantação?
Agora nós poderíamos usar a forma de scripts Grand Gulp e NPM de fazê-lo, se você escolher.
Mas há um novo garoto no bloco chamado como webpack.
Webpack como entenderíamos muito em breve é um empacotador de módulos.
Agora, vamos olhar para alguns detalhes nos próximos dois slides.
Então, o que webpack permite que você faça é empacotar seu aplicativo Angular de uma maneira
que é fácil de implantar em um site e
tornar seu aplicativo Angular disponível para os usuários.
Agora, como estamos usando Angular CLI para construir nossa aplicação Angular,
Angular CLI já aproveita o webpack para
fazendo sua construção para a pasta de distribuição para sua aplicação Angular.
Portanto, não precisamos fazer qualquer trabalho adicional explicitamente para fazer uso do webpack.
Uma vez que estamos usando Angular CLI.
Porque a Angular CLI cuida de todo o trabalho pesado em nosso nome.
Então, mas antes de ver o que a maneira Angular CLIs de construir sua distribuição
ainda mais facilidade.
Precisamos entender alguns conceitos sobre webpack e
como webpack funciona com um pouco de detalhe para
que quando Angular CLI produz a pasta de distribuição você pode olhar e
ver o que exatamente está sendo construído pela Angular CLI.
Então meu objetivo desta palestra
em particular é apenas dar-lhe uma breve visão geral do webpack.
Esta palestra não é uma introdução a como fazer uso do webpack.
Isso está além do escopo deste curso, mas
se você estiver interessado, o site de webpacks
tem muitas informações sobre como webpack pode ser usado para outras aplicações.
Você poderia, em princípio, usar webpack para empacotar seu aplicativo Bootstrap
que você desenvolveu no curso anterior também.
Mas neste momento vamos olhar para como fazemos uso do webpack
como parte da forma Angular CLI de construir nossa interpretação angular.
Então, obviamente, a primeira pergunta que surge em sua mente é,
o que exatamente é webpack?
Do que estamos falando?
Webpack, esta é a definição da própria documentação do webpack.
Ele diz que o webpack é um pacote de módulos para aplicações JavaScript modernas.
Seu aplicativo Angular que você tem trabalhado até
agora é um aplicativo JavaScript moderno e fácil.
Agora todos vocês estão trabalhando com a vanguarda da tecnologia Angular.
E assim, obviamente, ele se qualifica como um aplicativo JavaScript moderno e
portanto, usar webpack faz todo o sentido.
Agora o que webpack melhor é,
ele olha para toda a estrutura do seu aplicativo Angular.
Então, ele atravessa recursivamente o seu código do seu aplicativo Angular
procurando ver a melhor forma de agrupar
as informações no que é chamado como pacotes.
Quando webpack olha para o seu código, ele trata todos os arquivos que você
tem dentro de seu aplicativo Angular, seja ele um JavaScript de arquivo Typescript,
seja um arquivo CSS, seja ele um arquivo SAS, seja ele um arquivo de imagem.
Seja qual for, ele trata cada um deles como módulos de sua perspectiva,
e então decide, qual é a melhor maneira de empacotar esses módulos
no que são chamados como pacotes que podem ser baixados do.
Server para o seu navegador web de uma maneira confortável e conveniente.
Então, quando falamos sobre webpack, obviamente precisamos esclarecer o que significa um pacote.
Como afirmei brevemente no slide anterior, um pacote não passa de
um arquivo JavaScript que incorpora ativos.
Agora, você tem que ter isso em mente que o webpack trata tudo como JavaScript.
Para ele se é CSS ou qualquer um dos outros tipos de arquivos,
eles também serão tratados como JavaScript a partir da perspectiva do webpack.
Agora não fique muito preocupado, o webpack sabe como empacotá-los e
tratá-los como pacotes JavaScript onde ele prepara esses pacotes.
Ou módulos JavaScript onde ele prepara esses pacotes.
Então, um pacote é algo que agrupa módulos que pertencem juntos.
Quando eu falo sobre módulo Eu não estou implicando módulo Angular,
Eu não estou implicando módulo JavaScript.
Como eu disse e Webpack, cada arquivo é criado como um módulo.
E assim agrupar esses módulos juntos,
que devem ser servidos ao cliente em uma única resposta a uma solicitação.
Então, o próprio webpack toma uma decisão sobre o que
partes devem ser unidas em um pacote.
E deve ser entregue em conjunto para que a renderização do seu aplicativo web
seja feita da maneira mais eficaz.
Agora, Angular CLI já construiu sua configuração de como melhor empacotar
o Angular Assets, de modo que ele é mais convenientemente entregue ao navegador.
Então não precisamos nos preocupar sobre como fazer isso nós mesmos,
vamos deixar para a lógica angular CLI cuidar de toda essa configuração de
como esse pacote constrói seus pacotes em nosso nome.
Então, o que Webpack faz é, ele começa no nível mais alto.
Na sua aplicação Angular, o nível superior é index.html e main.js arquivos,
como aprendemos na primeira lição deste curso.
Então ele começa lá, e depois segue todas as entradas
que você usa naqueles no caminho e
traz uma organização hierárquica de todas as partes diferentes.
Então, o que é chamado de gráfico de dependência é construído por webpack.
Agora usando este gráfico de dependência, Webpack então decide como
empacotar seus pacotes e que imagens um ou mais pacotes como eles fazem
sentido para seu aplicativo específico que webpack é pacote.
E no processo de fazê-lo, quando ele está manipulando arquivos não-JavaScript,
como CSS, HTML e um SAS ou Images e assim por diante.
Em seguida, ele usa plugins que permitem pré-processar e
modificar esses arquivos, esses arquivos não JavaScript,
de uma forma que eles podem ser agrupados em seus pacotes webpack.
Se você estiver usando webpack do zero,
então você descreveria algumas das configurações do seu webpack para funcionar.
Nesses arquivos em um arquivo chamado
webpack.config.js que incluímos na pasta raiz do seu aplicativo.
No nosso caso, uma vez que estamos confiando na Angular CLI para fazer isso em nosso nome
Angular CLI clica automaticamente aqui na construção da configuração para
webpack para trabalhar.
Agora, quando falamos sobre webpack, há quatro conceitos que são importantes para
nós entendermos sobre como webpack funciona em fotos.
O primeiro é a entrada.
Entry é o ponto em que o webpack deve iniciar e
seguir para baixo para criar o gráfico de dependência.
Então, arquivo main.ts, por exemplo, é um ponto de entrada.
Então webpack pode começar sua perseguição na construção do gráfico de dependência.
Direto em main.ts e depois ir atrás de todas as instruções de importação de lá
para seus outros arquivos e, em seguida, a partir daí eles importam esses arquivos e
assim por diante todo o caminho para baixo até que ele constrói o gráfico de dependência.
Agora, a segunda parte é o que chamaríamos como a saída.
No webpack, a saída é o conjunto de pacotes que o webpack prepara
em seu nome.
O terceiro é carregadores.
Agora webpack como eu disse só entende JavaScript e
sabe apenas como trabalhar com JavaScript.
Mas como eu também mencionei, o webpack trata todos os arquivos como um módulo.
Então aqueles arquivos que não são JavaScript eles têm que ser
transformados e, em seguida, colocar em seus pacotes usando
transformações apropriadas e, em seguida, eles serão adicionados ao seu gráfico de dependência.
É aqui que entra o uso dos vários plugins.
O que os plugins ajudam você a fazer?
Os plugins ajudam você a executar as várias ações e funcionalidades personalizadas
ou compilações que você precisa fazer para construir seus pacotes.
Então ele vai ajudá-lo a transformar seu CSS em uma maneira que eu posso
pacote em seus pacotes JavaScript, e assim por diante.
Então, essa é uma introdução rápida de como o webpack realmente funciona.
Agora com essa rápida introdução, no próximo exercício você vai
ver que vamos convenientemente fazer uso de um comando chamado ng
build para construir nossa pasta de distribuição para nossa aplicação Angular.
Ng build permite até mesmo construir uma versão de desenvolvimento ou
versão de produção do seu aplicativo Angular.
Quando usamos ng surf,
o Angular CLI estava realmente fazendo uso de webpack para embalar coisas.
Então, se você voltar e
olhar para todas as coisas que estavam sendo impressas na janela do seu terminal,
você começará a ver webpack trabalhando nos bastidores para fazer os pacotes.
Agora, no próximo exercício, você vai construir sua pasta de distribuição,
que pode então ser copiado para o seu site e, em seguida, implantar seu aplicativo Angular.
Agora eu já fiz uma compilação
do aplicativo Angular que nós construímos até agora.
Então, vamos dar uma olhada rápida na pasta de distribuição para ver o que está em
lá antes de você realmente fazer o exercício.
Assim, uma vez que você completar o exercício, eu recomendo fortemente que você vá e
olhar para a pasta de disco que foi construído em sua pasta de projeto de aplicativos Angulares.
E então olhe e veja exatamente os arquivos que vou mostrar agora.
Direto na pasta de distribuição.
Indo para a nossa aplicação Angular no Visual Studio aqui,
você vê que agora estou abrindo a pasta de distribuição.
E dentro da pasta de distribuição você verá um monte de arquivos aqui.
Você verá um arquivo chamado main uma longa cadeia onde
.bundle.js de seu conhecimento de Gulp e Grunt do curso anterior,
você vai começar a ver o que essa cadeia longa intermediária significa.
É assim que você adiciona esse controle de versão ao seu aplicativo.
Da mesma forma, você vê outro arquivo chamado styles.something.css.
Então você vê um vendor.bundle.js.
E depois polyfills.js.
Então você tem um arquivo index.html, e
você está se perguntando o que aconteceu com todo o seu código HTML?
Está em um daqueles pacotes lá, ok.
Então, todos os modelos que você escreveu estão todos lá em um desses pacotes,
exceto a página index.html.
Você precisa da página index.html explicitamente porque,
quando um usuário digita o URL para
seu site na barra de endereços do navegador.
Então você iria pousar em seu site e
as páginas HTML do ponto de índice onde você começa tudo e
você precisa que para inicializar seu aplicativo Angular de modo que é por isso que isso está lá.
E então você também vê os arquivos fontawesome lá que são necessários e
que dentro do ativo você vê algumas imagens lá, na pasta de ativos.
Então, dando uma olhada rápida no arquivo principal, você verá que este é
como você pode ver é um conjunto concatenado de muitos arquivos compactados.
Agora, se você tentar ler isso, não vai ser fácil,
é um arquivo enorme com um monte de coisas.
Isso também inclui todo o código de estruturas angulares,
uma mão seu código que você escreveu.
E o código que vem de Angular Material, Flex Layout e
todas as outras coisas que você incluiu com seu aplicativo Angular.
Da mesma forma, você tem polyfills e, em seguida, estilos e
você começa a ver que todas as coisas que você usa dentro do seu aplicativo Angular
foram empacotadas nesses arquivos lá.
Então, com isso, espero que você tenha uma visão geral rápida do webpack.
Agora é hora de irmos para o exercício, onde vamos simplesmente fazer uso do comando
Angular CLI ng build para construir esta pasta de distribuição.
E você verá como você pode implantar seu aplicativo Angular em um site.
Logo após concluir a compilação.
[MÚSICA]