Na documentação do webpack, ele apresenta o seguinte código:
module.exports = {
mode: 'production'
};Como ele poderia ser usado na aplicação? Qual diferença que ele traria? Substitui o que foi explicado no vídeo?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Na documentação do webpack, ele apresenta o seguinte código:
module.exports = {
mode: 'production'
};Como ele poderia ser usado na aplicação? Qual diferença que ele traria? Substitui o que foi explicado no vídeo?
Fala aí Victor, tudo bem? Quando informamos que nosso modo será produção o Webpack irá aplicar uma série de comandos, plugins e otimizações no código final.
Basicamente com o modo em produção ele ir se comportar da seguinte maneira:
Sets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin
Teriamos um arquivo de configuração equivalente á:
module.exports = {
+ mode: 'production',
- performance: {
- hints: 'warning'
- },
- output: {
- pathinfo: false
- },
- optimization: {
- namedModules: false,
- namedChunks: false,
- nodeEnv: 'production',
- flagIncludedChunks: true,
- occurrenceOrder: true,
- sideEffects: true,
- usedExports: true,
- concatenateModules: true,
- splitChunks: {
- hidePathInfo: true,
- minSize: 30000,
- maxAsyncRequests: 5,
- maxInitialRequests: 3,
- },
- noEmitOnErrors: true,
- checkWasmTypes: true,
- minimize: true,
- },
- plugins: [
- new TerserPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}Espero ter ajudado.