Is using mode and webpack.EnvironmentPlugin redundant?

Question

Trying to understand what webpack.EnvironmentPlugin is doing for me.

is using mode and webpack.EnvironmentPlugin redundant?

ie

module.exports = merge(webpackCommonConfig, {
  mode: 'development',
  ...
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
  ],
  ...
});

TLDR: The short answer for this this example only: Yes it's redundant.

Long answer: There is much more going on beyond just saying that mode is changing the env var for NODE_ENV. While at the surface it would look as if new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }) is only doing just that but at runtime.

Answer 1

Yes for this specific use case only!

TL;DR;

--mode development automatically sets: process.env.NODE_ENV to value development

--mode production automatically sets: process.env.NODE_ENV to value production

You don't need to add the following plugin: new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),

This would be the only setting that would be redundant, because NODE_ENV: 'development|production' will be automatically set, when using --mode!

If you don't set --mode it will automatically default to production!

Read on to see why --mode is actually not redundant and what it actually does under the hood:

---

What actually happens if you set --mode to production or development:

Mode: development

Sets process.env.NODE_ENV to value development.

Enables:
NamedChunksPlugin
and NamedModulesPlugin.

Mode: production

Sets process.env.NODE_ENV to value production.

Enables:
FlagDependencyUsagePlugin,
FlagIncludedChunksPlugin,
ModuleConcatenationPlugin,
NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,
SideEffectsFlagPlugin
and UglifyJsPlugin.

--mode adds different plugins to the compilation process, depends on which value is set for mode.

>> Reference

Please remember that setting NODE_ENV doesn't automatically set mode