前言
在前端开发中，我们经常会遇到需要根据环境变量进行不同行为的需求，比如根据环境变量对后端接口的地址进行配置。而在 webpack 打包中，经常需要根据环境变量进行不同的配置，这时候我们就需要用到 envify-loader 这个 npm 包来帮助我们处理环境变量。
envify-loader 是什么
envify-loader 可以把 js 代码中的 process.env 替换成对应的环境变量的值，从而使我们可以使用环境变量来进行配置。它是基于 envify 实现的，比较轻量级，同时也支持通过 babel-loader 进行编译后再处理。
安装 envify-loader
我们可以通过 npm 来安装 envify-loader：
npm install envify-loader --save-dev
使用 envify-loader
我们需要在 webpack 配置文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
-
------- ---------------
-------- -
-------- ---------------------
-
--
-
------- ----------------
-------- -
--------- --------------------
-
-
-
-
-
-
-- ---
-这里是一个简单的示例，首先我们使用 babel-loader 对 js 代码进行编译。在编译后，我们使用 envify-loader 来处理环境变量，并将 NODE_ENV 环境变量的值转换成对应的值。
在代码中使用
通过 envify-loader 处理后，我们的 js 代码中的 process.env 将会被替换成对应环境变量的值，可以像下面这样在代码中使用：
if (process.env.NODE_ENV === 'development') {
console.log('development mode')
}配置多个环境变量
如果我们需要配置多个环境变量，只需要在 options 中添加对应的变量和值即可，比如：
options: {
NODE_ENV: process.env.NODE_ENV,
API_URL: process.env.API_URL
}总结
使用 envify-loader 可以轻松地处理环境变量，并在代码中使用。这个包广泛使用于很多项目中，并且在社区中得到了很好的支持和更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e25a563576b7b1ecf1b