Question

因此，经过一番调查，看起来Webpack-Dotenv只是将.env的所有变量分配为DefinePlugin(env)字符串的委托给'process.env.X'。与构建嵌套的JSON对象相反。

这样做（据我了解）是因为它只是用文字值替换了在代码中找到的字符串。因此process.env.FOO_KEY变成了'123'或代码中的任何内容。因此，在您的webpack输出/构建文件中，如果您四处搜索，只会看到'123'，没有process.env.FOO_KEY的证据。

所以这很奇怪。在Webpack 4上一切正常。我正在使用Dotenv插件将前端密钥等传递给客户端。但是现在我正在测试 Webpack 5 。我已经构建好了它，在一个简单的示例中，Dotenv确实用字符串成功替换了值，因此我可以使用Webpack 5进行process.env.FOO_KEY并看到生成的'123'。在“最小可行环境”测试情况下，我很快遇到麻烦。

Dotenv和（已连接）DefinePlugin不会替换生成的文件中的所有变量。

那是问题1。

问题2是，我们的代码中也有此问题：

...
const { KEY_1, KEY_2 } = process.env
...

过去曾经与Dotenv和Webpack 4一起使用，但是我不确定这是Webpack 5还是缺少某些东西，但是看来这在Webpack 4环境中是不可能的。任何想法在那里可能会发生什么？理想情况下，我想要一个具有process映射属性的全局process.env对象，该对象包含所有键，而不是此查找/替换业务。这样看起来更加健壮和自然。这就是问题2，如何使它作为嵌套对象工作，以便您可以进行const { KEY_1, KEY_2 } = process.env之类的事情。

回到问题＃1，我没有将其范围缩小到为什么在所有情况下都不会替换它的确切原因。这里有什么想法为什么会发生呢？也许有些Webpack 5洞悉了为什么atm损坏了，或者我的文件中嵌套太多或某物。无论如何，谢谢您的帮助。

更新...嗯...我禁用了Webpack 5缓存，这一切似乎都在起作用。暗示！但是我现在不知道如何启用缓存并仍然解决此问题，因为缓存比不使用缓存要快得多。

// cache: {
//   type: 'filesystem',
//   cacheDirectory: require('path').resolve('./tmp'),
//   name: 'something',
//   version: require('../package.json').version,
//   store: 'instant'
// },

使用Dotenv插件时如何使Webpack的DefinePlugin返回一个`process`对象

0 个答案: