EnvironmentPlugin

这EnvironmentPlugin是使用DefinePluginon process.env键的简写。

用法

The EnvironmentPlugin accepts either an array of keys. 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)
})

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

使用默认值

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

new webpack.EnvironmentPlugin{
  NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
  DEBUG: false
})

process.env 中取到的值类型均为字符串。不同于 DefinePlugin，默认值将被 EnvironmentPlugin 执行 JSON.stringify。如果要指定一个未设定的默认值，使用 null 来代替 undefined。

例：

让我们看一下对下面这个用来试验的文件 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') { // <-- 'production' from NODE_ENV is taken
  console.log('Welcome to production'
}
if (false) { // <-- 使用了默认值
  console.log('Debugging output'
}

执行 DEBUG=false webpack 则会生成：

if ('development' === 'production') { // <-- default value is taken
  console.log('Welcome to production'
}
if ('false') { // <--  DEBUG 的 'false' 被带过来了
  console.log('Debugging output'
}

DotenvPlugin

第三方DotenvPlugin（dotenv-webpack）允许您公开（的子集）dotenv变量：

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

 new Dotenv{
  path: './.env', // Path to .env file (this is the default)
  safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
})