前言
当我们使用 webpack 进行前端开发或构建时，经常需要使用环境变量来配置一些值，例如接口地址、API key 等等。而为了方便配置和管理这些环境变量，我们可以使用 npm 包中的 environment-variables-webpack-plugin 来帮助我们。
本文将详细介绍如何使用 environment-variables-webpack-plugin 来管理环境变量。
安装
使用 npm 安装 environment-variables-webpack-plugin：
npm install -D environment-variables-webpack-plugin
使用
在 webpack 配置文件中，进行如下配置：
-- -------------------- ---- -------
----- -------------------------- - ------------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
-- -----------
----------- -----------------------
-------- ---------------------------
---
--
--在上面的配置中，我们使用了 EnvironmentVariablesPlugin 插件，并且传入了一个对象，对象中每一个 key 都对应一个环境变量，value 是环境变量的值。
在上面的代码中，我们传入了两个环境变量：MY_API_KEY 和 API_URL。其中 MY_API_KEY 的值是通过 process.env.MY_API_KEY 获取的，而 API_URL 的值是一个常量。
这样配置之后，在我们的前端应用中，就可以使用 process.env.MY_API_KEY 或者 process.env.API_URL 来获取对应的环境变量值了。
示例
为了演示 environment-variables-webpack-plugin 的使用，我们可以创建一个简单的前端项目，并且在其中使用该插件。
首先，创建一个基于 webpack 的前端项目，并且使用 npm 安装 environment-variables-webpack-plugin 和 dotenv（这个包用来从 .env 文件中读取环境变量）：
# 创建项目 mkdir my-project && cd my-project npm init -y # 安装依赖 npm install -D webpack webpack-cli environment-variables-webpack-plugin dotenv
然后，在项目根目录下创建一个 .env 文件，并在其中定义两个环境变量：
MY_API_KEY=my-api-key API_URL=https://example.com/api/
接着，在 webpack 配置文件中，添加 EnvironmentVariablesPlugin 插件的配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------------- - ------------------------------------------------
----- ------ - --------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
-------- -
--- ----------------------------
----------- -----------------------
-------- --------------------
---
--- ---------
--
--最后，在我们的 src/index.js 文件中，可以使用 process.env.MY_API_KEY 或 process.env.API_URL 来读取环境变量的值了：
const apiUrl = process.env.API_URL; const apiKey = process.env.MY_API_KEY; console.log(apiUrl); // 输出：https://example.com/api/ console.log(apiKey); // 输出：my-api-key
运行该应用：
npm start
访问 http://localhost:8080 ，在控制台可以看到输出的环境变量值。
总结
使用 environment-variables-webpack-plugin 插件，可以很方便地管理和配置我们的环境变量，从而使我们的前端项目更加灵活和可配置。除此之外，也可以通过 .env 文件来设置环境变量，方便本地开发和测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf48