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?
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.