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)
})本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com

