webpack - 使用 mode 和 webpack.EnvironmentPlugin 是多余的吗？

Question

试图了解什么webpack.EnvironmentPlugin正在为我做。

正在使用mode和webpack.EnvironmentPlugin多余的？

即

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

TLDR:仅针对此示例的简短回答:是的，这是多余的。

长答案:除了说模式正在改变 NODE_ENV 的环境变量之外，还有更多的事情发生。从表面上看，它看起来好像 new webpack.EnvironmentPlugin({ NODE_ENV: 'development' })只是在运行时这样做。

Answer 1

是的，仅适用于此特定用例!

TL;DR;

--modedevelopment 自动设置:process.env.NODE_ENV 值 development

--mode production 自动设置:process.env.NODE_ENV 值 product

您不需要添加以下插件:new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),

这将是唯一设置，冗余，因为NODE_ENV: 'development|生产'使用 --mode 时会自动设置!

如果您不设置--mode，它将自动默认为生产!

继续阅读，了解为什么 --mode 实际上并不多余，以及它实际上在幕后做了什么:

<小时/>

如果将--mode设置为生产或开发，实际会发生什么:

模式:开发

Sets process.env.NODE_ENV to value development.

Enables:
NamedChunksPlugin
and NamedModulesPlugin.

模式:生产

Sets process.env.NODE_ENV to value production.

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

--mode 向编译过程添加不同的插件，具体取决于 mode 设置的值。

>> Reference

Please remember that setting NODE_ENV doesn't automatically set mode