Agora que lembrei que o professor havia dito sobre a pasta dist não fazer parte. Acabei de excluir ela e a página continuava com o arquivo renderizado.
Inclusive, editei o CSS e, novamente a página foi modificada automáticamente. Ou seja, o Webpack Dev Server nem usa essa pasta. Ela irá servir apenas para o Pacote (Bundle) Final de distribuição.
Vou deduzir que é isso mesmo. Acabei de fazer um outro teste para confirmar esse entendimento, rs. Olha a brincadeira no arquivo webpack.config.js:
//if(process.env.NODE_ENV == 'production'){ // variável do NodeJS que me dá acesso ao processo do Node
plugins.push(new babiliPlugin());
plugins.push(new optimizeCSSAssetsPlugin({
/*
O cssProcessor que utilizaremos será o cssnano, por isso, estamos fazendo o require() diretamente. Configuramos também cssProcessorOptions, que recebe um objeto JavaScript com as configuração do pré-processador. Adicionamos dentro do objeto as propriedade discardComments, que receberá o removeAll().
O que foi passado para cssProcessoOptions não estará relacionado com optimizeCSSAssetsPlugin, mas sim com cssProcessor importado. Após pedirmos para que todos os comentários fossem removidos, porque não faz sentido minificá-los em produção.
Temos ainda a propriedade canPrint, que vamos configurar como true, que adicionaremos logo abaixo do optimizeCSSAssetsPlugin. Com ela, indicaremos se o plugin pode exibir informações no Console.
*/
cssProcessor: require('cssnano'),
cssProcessorOptions: { // opjeto JS com as configurações do meu pré-processador. No caso do cssnano
discardComments: { // tudo isso será repassado para o cssnano
removeAll: true
}
},
canPrint: true // indica se o optimizeCSSAssetsPlugin pode exibir informações no console
/*
No Terminal, rodaremos o comando de build-prod, depois, ao acessarmos style.css, veremos que toda a parte de estilo foi minificada. Se rodarmos os comandos build-prod, o arquivo estará minificado, enquanto com o build-dev, descobriremos que ele não está. Abriremos o arquivo index.html no navegador, confirmaremos que está tudo funcionando.
Resolvemos a questão do Flash of Unstyled Content e a parte de minificação.
*/
}));
//}
Está lá! Os arquivos CSS estão sendo mimificados!
Mas agora surge outra dúvida: Como rodar o ambiente de produção?... Preciso abrir outro tópico?
