Então vamos continuar e abrir o nosso projeto RodaNPM Star. Ele vai carregar o servidor de desenvolvimento, Webpack Dev Server, e vai abrir uma aba no navegador, localhost na porta 3000, o aplicativo aqui rodando. Voltando aqui ao terminal, não tem muita saída útil pra gente, queremos ver o que é que o Webpack está fazendo. Pra poder fazer isso, a gente tem que mudar a configuração do Webpack Dev Server pra não ficar quieto, tá? Ficar quieto. Então vamos aqui, de volta editor de texto, vai na pasta config, no diretório do projeto, tem um arquivo chamado Webpack Dev Server, tá? .config.js Aí você vai procurar por quiet, que o I é T, tá no modo quiet, que a gente não quer, quem a gente quer que ele muda de true pra false, pra ele poder mostrar alguma coisa quando a gente rodar de novo. Então vou matar o servidor com o control C, vou rodar a imprensa de novo, e agora ele vai mostrar a saída do Webpack. Vou fechar aquela aba, voltar ao terminal, não acho que ele está esperando até o Bando C compilado aqui. Tá? Então está aqui, se você rolar pra cima e vai pra essa parte aqui, depois da WDM no seu Webpack, todos os anos vai ser um 4.19 para 1. Você vê que tem várias assets e o tamanho, muito importante você ver o tamanho de cada recurso, e o que a gente vai se preocupar é o Js, que é o JavaScript que está aqui. Nesse caso, o Create React App já faz uns optimizações, por padrão, mas a gente quer desabilitar isso pra poder ver com mais simplicidade o bundle, porque ele já está dividindo a divisão de código, já está sendo aplicado, a gente quer desabilitar isso pra poder aprender a fazer nós mesmos. Então vamos voltar ao editor de texto, agora em vez de configurar o Dev Server, vamos no config.js. Agora tem muita coisa aqui, a gente não quer saber muitas essas coisas, exceto que quando ele dá o return da configuração do Webpack, você tem que procurar por Optimization, essa configuração a gente não quer, então vou fechar aqui dessa maneira, essa aba toda aqui, essa propriedade toda vou comentar. Comente a propriedade do objeto que cuida a propriedade de Optimization, e não queremos a optimização porque a gente quer ver fazer nosso próprio Code Splitting. Então comentei tudo da Optimization. Com isso, vamos voltar ao terminal e reiniciar o npm start, eu usei Ctrl C pra matar o servidor, abriu a nova aba de novo, esperando o Bando C compilado, pronto, se você rolar aqui pra cima de novo pra ver os assets, na hora de que agora só tem um bundle.js, está em modo de desenvolvimento, tá certo? Development, então no development, o bundle normalmente é muito, muito maior do que o de produção porque não tem optimizações pra incompressão, pra diminuir o tamanho. Então você note que tem o static bar.js, bundle.js, esse é o cara que tem o nosso código de JavaScript, tamanho 1.61, tá? Vamos ver aqui no navegador, se eu abrir no seu navegador, abre as ferramentas de desenvolvimento, no meu caso estou usando Firefox, e eu vou pra aba de network, o web developer, aba de network, no Chrome é a mesma coisa, network, então nessa aba de network, eu vou atualizar a página de novo pra poder ver o que a gente recebe, tem que marcar JS, só quero saber de JS, que é JavaScript, tem aqui o bundle para JS, se você não conseguir ver o nome, você pode clicar e tirar as coisas que você não quer ver, eu já tinha tirado alguma coisa do domain, eu acho que eu não quero ver o domain, então tirei pra poder ver melhor o nome do arquivo, então clica aqui, tem o bundle, tá? Colose, deixa eu tirar esse cos. Tem o bundle aqui, que o nome apareceu, mas tá aqui. Então esse é o bundle, né, o arquivo que a gente recebe, pra que tenha o nosso aplicativo, eu não vou clicar em response, que vai demorar muito pra carregar, então tome cuidado quando clicar em response. Então esse cara, então a gente já tem aqui o bundle, e já sabe como ver o bundle que tá recebendo, na aba network do navegador, então vamos revisar o que a gente fez nessa aula, pra poder a gente aprender sobre codes player, a gente vai começar assim configurando aqui para o dev server, pra não ser quieto, quite set pra false, pra poder mostrar no terminal o que o webpack compilou. Ele inicialmente faz optimizações, mas a gente não quer, ele faz porque a gente quer aprender, então a gente vai no webpack.conf.js e comenta toda a propriedade Optimization. Com isso no terminal vai aparecer só um bundle.js, quando você roda npm start, pra build de desenvolvimento. Então por essa aula só e até a próxima.