如何在Javascript中使用webpack隐藏api密钥

我正在做一个简单的javascript项目（仍在学习），它需要一个API。

---

在这些要求中，有一种是使用webpack来隐藏api密钥，但据我所知，在没有后端（我还不能使用它）的前端应用程序中不可能隐藏密钥。。。我错过了什么吗？？我必须在你的网页配置中添加一些Node.js代码吗？

，在

插件部分添加以下内容：

// webpack.config.js 
plugins: [
  ....
  new webpack.DefinePlugin({
    "process.env": {
      API_KEY: JSON.stringify(process.env.API_KEY),
    },
  }),
]

创建一个
.env
文件，在其中添加如下内容：

// .env
API_KEY="thevalueOfTheAPIKey"

为了安全起见，您的
.env
文件必须添加到
.gitignore
文件中，您还应该创建一个其他人可以使用的
.env.sample
文件，
.env.sample
的全部本质是帮助其他人知道如何在本地重新创建
.env
文件，因此，对于我们上面的内容，您应该：

// .env.sample
API_KEY=""

在您的项目中，无论您在何处使用环境变量，例如

// index.js
require("dotenv").config();

const API_KEY = process.env.API_KEY;

您可以在此处的文档中阅读有关
process.env
的更多信息：
“据我所知，在没有后端的情况下，不可能对前端应用程序隐藏密钥”。确切地说，您可以将
API\u键
保留在
.env
文件中的代码之外，尽管它仍然可以在浏览器中的
inspect
上看到。这就是你想要的吗？所以我是对的：（那么在一个普通的javascript应用程序中使用webpack有什么用？谢谢@Tolumide，但我仍然需要一个env文件的后端，对吗？不，你不需要。我将在这里创建一个关于如何将
.env
与webpack一起使用的答案。