在项目开发过程中，我们常常需要使用环境变量来取代一些敏感信息，例如 API_KEY，密钥等等，但在前端中，如何使用环境变量呢？这时候，我们可以使用 env-replace-loader 来实现环境变量在代码中的替换。
什么是 env-replace-loader
env-replace-loader 是一个 Webpack loader，它可以将指定的环境变量替换成真实的值，并将其注入到 JavaScript 代码中。这个过程发生在模块加载前，所以在实际执行时，值已经被替换完成，无需额外的运行时处理。
安装
npm install env-replace-loader --save-dev
如何使用
Step 1：创建 .env 文件
在项目的根目录下创建一个名为 .env 的文件，并在其中定义你需要的环境变量。例如：
API_KEY=your_api_key PORT=3000
Step 2：配置 webpack
在 webpack 的配置文件中添加 loader 规则：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
-
------- ---------------------
-------- -
------------ ----------------------- ----------
-
--
-------------- -- -- ------
-
--
-- -- -----
-
-
-- ---
-其中，envFilePath 是指定 .env 文件的路径。
Step 3：使用环境变量
在代码中，你可以如下使用环境变量：
console.log(process.env.API_KEY);
在启动项目时，Webpack 会将 process.env.API_KEY 替换成 .env 文件中定义的值（例如： your_api_key ）。
参数
env-replace-loader 支持以下参数：
envFilePath（必选）：.env文件的路径；envPattern（可选）：定义被替换的环境变量名的正则表达式（默认为/^\$[a-z0-9_-]+\$/i）；envReplacePattern（可选）：定义被替换的字符的正则表达式（默认为/\$([a-z0-9_-]+)\$/ig）。
例如，下面是一个自定义的配置：
{
loader: "env-replace-loader",
options: {
envFilePath: path.resolve(__dirname, "../.env"),
envPattern: /^\%(.*?)\%$/ig,
envReplacePattern: /%(.*?)%/g
}
}以上配置中，环境变量的格式被定义为 %variable_name%，例如 %API_KEY% 。
示例代码
下面提供一个示例代码，对 react 和 react-dom 进行替换。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
---------------------------------
------------------------------
----------------
------------------
---- --
--------------------
-------------------------------
--结论
env-replace-loader 是一个很实用的工具，可以方便地将环境变量替换成真实的值，并注入到代码中。本文介绍了 env-replace-loader 的安装和使用方法，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e25a563576b7b1ece6f