在前端开发过程中，我们经常需要根据不同的环境变量来设置一些配置参数（如 API 地址、域名等）。而 node-env-loader 就是一个可以帮助我们加载环境变量的 npm 包。本文将详细介绍该包的使用方法。
安装 node-env-loader
首先，我们需要安装 node-env-loader：
npm install node-env-loader --save-dev
配置 webpack
在 webpack 配置文件中，我们需要使用 node-env-loader 来加载环境变量：
-- -------------------- ---- -------
----- ------------- - ---------------------------
-------------- - -
-- ---
-------- -
-- ---
----------------
--
--此外，我们还需要在 package.json 中配置环境变量：
{
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack"
}
}上述配置中，我们为不同的打包命令设置了不同的环境变量值。
加载环境变量
在前述配置完成后，我们就可以在代码中加载环境变量了。nodeEnvLoader 函数会将环境变量注入到 process.env 对象中，我们只需要在代码中通过 process.env.xxx 来访问相应的环境变量即可。
例如，我们可以通过以下方式来加载 API 地址：
const apiHost = process.env.API_HOST;
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
-- -----------------
----- ------------- - ---------------------------
-------------- - -
-- ---
-------- -
-- ---
----------------
--
--
-- ------------
----- ------- - ---------------------
---------------- ----------------
-- ------------
-
---------- -
-------- --------------------- ------------------------------ --------------------
-------- -------------------- -------------------------------- --------
-
-在上述代码中，我们使用 webpack 来打包代码，并在不同的打包命令中设置不同的环境变量值。在代码中，我们通过 process.env.API_HOST 来访问设置的 API 地址，并将其输出到控制台。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055af181e8991b448d899b