dotenv-webpack 在 webpack.config.js 中使用环境变量答案

【问题标题】：dotenv-webpack use environment variable in webpack.config.jsdotenv-webpack 在 webpack.config.js 中使用环境变量
【发布时间】：2020-02-14 21:13:28
【问题描述】：

我的.env 是这样设置的：

SECRET_KEY=mysecretkey123

我的webpack.config.js 是这样设置的：

const Dotenv = require('dotenv-webpack');

module.exports = {
...
proxy: {
 'api': {
   target: 'foo.bar'
   headers: {'api_token': process.env.SECRET_KEY}
  }
}
...
plugins: [
    new Dotenv({
      path: '.env',
    }),
]

}

但是，当我运行我的应用程序时，我收到一条错误消息，指出我的 api 令牌是 undefined

我知道 dotenv 工作正常，因为在我的应用程序本身中我可以执行 console.log(process.env.SECRET_KEY) 并查看我的密钥，但是这似乎不会在我的 webpack.config.js 文件本身中公开我的环境变量。

有没有办法配置 dotenv-webpack 以允许在 webpack.config.js 中使用环境变量？

【问题讨论】：

标签： webpack dotenv

【解决方案1】：

如果您想直接在 webpack.config.js 中使用 .env 文件中的变量，请了解它在运行时的行为与任何其他 javascript 文件一样，因此您需要直接在config 文件，而不是 dotenv-webpack 插件，它将变量插入到您的捆绑代码中。

即，只需 npm install dotenv 并将 require('dotenv').config() 添加到 webpack.config 文件的顶部。

【讨论】：

天啊！我很蠢。谢谢你。我现在可以睡觉了。