1. EnvironmentPlugin

EnvironmentPlugin是一个通过DefinePlugin来设置process.env环境变量的快捷方式。

1.1. 用法

new webpack.EnvironmentPlugin(options)

1.2. options

类型：object | array

1.2.1. array

EnvironmentPlugin可以接收一个键的数组。

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG'])

上面的写法和下面这样使用DefinePlugin的效果相同：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
})

[info] 注：

使用不存在的环境变量会导致一个 "EnvironmentPlugin-${key}environment variable is undefined" 错误。

1.2.2. Object

EnvironmentPlugin也可以接收一个指定相应默认值的对象，如果在process.env中对应的环境变量不存在时将使用指定的默认值。

new webpack.EnvironmentPlugin({
  NODE_ENV: 'development', // 除非有定义 process.env.NODE_ENV，否则就使用 'development'
  DEBUG: false
})

[warning] 注：

从process.env中取到的值类型均为字符串。

[info] 注：

不同于DefinePlugin，默认值将被EnvironmentPlugin执行JSON.stringify。

[info] 注：

如果要指定一个未设定的默认值，使用null来代替undefined。

1.3. 示例

让我们看一下对下面这个用来试验的文件 entry.js 执行前面配置的 EnvironmentPlugin 的结果：

if (process.env.NODE_ENV === 'production') {
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  console.log('Debugging output');
}

当在终端执行 NODE_ENV=production webpack 来构建时，entry.js 变成了这样：

if ('production' === 'production') { // <-- NODE_ENV 的 'production' 被带过来了
  console.log('Welcome to production');
}
if (false) { // <-- 使用了默认值
  console.log('Debugging output');
}

执行 DEBUG=false webpack 则会生成：

if ('development' === 'production') { // <-- 使用了默认值
  console.log('Welcome to production');
}
if ('false') { // <-- DEBUG 的 'false' 被带过来了
  console.log('Debugging output');
}

EnvironmentPlugin