在前端开发中，需要访问服务器或调用 API 接口时，常常需要使用敏感数据，如密钥或密码。为了保证数据的安全性，开发者们通常会将这些敏感信息放在环境变量中，通过读取环境变量来在代码中使用。
然而，环境变量的读取和配置并不是一项容易的任务，尤其当需要在多个不同的环境中使用不同的参数时，配置起来就更加复杂。
这时，dotenv-to-webpack 这个 npm 包就为我们提供了一种简单可靠的解决方案。它能够帮助我们自动地将环境变量注入到 webpack 构建过程中。
安装
我们可以通过 npm 来安装 dotenv-to-webpack：
npm install dotenv-to-webpack --save-dev
在 webpack 配置文件中引入该插件：
const Dotenv = require('dotenv-to-webpack');
module.exports = {
// ...
plugins: [
new Dotenv()
]
};这样，我们就可以在代码中通过 process.env 访问配置文件中的环境变量。
使用说明
使用 dotenv-to-webpack 很简单，我们只需要新建一个 .env 文件，将需要配置的环境变量写入其中，然后在 webpack 的配置文件中引入该插件即可。插件将自动读取这个 .env 文件，并将环境变量注入到 webpack 的 process.env 中。
下面是一个例子：
假设我们需要在 webpack 中引入 API_KEY 的环境变量，只需要在 .env 文件中写入：
API_KEY=my-api-key
然后在代码中可以这样使用：
console.log(process.env.API_KEY); // 'my-api-key'
值得注意的是，dotenv-to-webpack 的默认行为是将所有以REACT_APP_前缀开头的环境变量放入 process.env 中，如需使用其他前缀，可以在 webpack 配置文件中设置：
const Dotenv = require('dotenv-to-webpack');
module.exports = {
// ...
plugins: [
new Dotenv({ prefix: 'MY_APP_' })
]
};以上代码将会将所有以 MY_APP_ 开头的环境变量注入到 process.env 中。
示例代码
这是一个使用 dotenv-to-webpack 的示例代码：
.env 文件：
API_KEY=my-api-key API_URL=http://localhost:3000
webpack.config.js 文件：
-- -------------------- ---- -------
----- ------ - -----------------------------
-------------- - -
------ -----------------
------- -
--------- -----------
--
-------- -
--- --------
-
--index.js 文件：
console.log(process.env.API_KEY); console.log(process.env.API_URL);
运行 webpack 构建，并启动生成的 bundle.js：
API_KEY=my-api-key API_URL=http://localhost:3000 webpack-dev-server
通过以上代码可以看出，在环境变量配置文件 .env 中我们定义了 API_KEY 和 API_URL 两个环境变量，其中 API_URL 的值为 http://localhost:3000 。
通过 webpack 打包后，我们在代码中直接调用 process.env.API_KEY 和 process.env.API_URL 即可获取以上两个环境变量。
结论
dotenv-to-webpack 是一个十分便利的 npm 包，可以帮助前端开发者们将环境变量配置的烦恼从身上解放出来。在大多数情况下，我们只需设置 .env 中的环境变量即可。值得一提的是，我们也可以通过设置前缀来方便的区分不同的环境变量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6b77