在前端开发中，我们经常需要根据不同的环境来实现不同的功能，如开发环境、测试环境、生产环境等。这些环境之间的区别包括但不限于服务端地址、接口地址、cdn 地址、配置项等等，而这些区别需要在代码层面体现出来。在这种情况下，我们就需要使用 webpack 来实现多种环境变量的处理。
webpack 中的多种环境变量
在 webpack 中，我们可以使用不同的方式来定义多种环境变量，如以下几种：
1. process.env
在 Node.js 中，有一个名为 process 的全局对象，其中的 env 属性可以获取当前进程中的环境变量。而在 webpack 中，我们可以通过 DefinePlugin 来为 process.env 设置键值对，来定义我们需要的多种环境变量。
代码示例：
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
-------------- - -
-------- -
--- ----------------------
----------------------- -----------------------------
----------------------- ------------------------------------------
---
-- ---
--
-- ---
--上述配置将会在构建时为 process.env 设置 NODE_ENV 和 API_BASE 这两个环境变量，值分别为 production 和 https://api.example.com。我们可以在代码中通过 process.env.NODE_ENV 和 process.env.API_BASE 来获取这两个环境变量。
2. 环境变量文件
除了使用 DefinePlugin 进行定义以外，我们还可以使用环境变量文件来定义多种环境变量。这个文件可以是一个 .env 文件，也可以是 .env.development、.env.production 等后缀的文件。
在文件中，我们可以定义各种环境变量的键值对，如下所示：
NODE_ENV=development API_BASE=https://api.example.com
然后，在 webpack 配置文件中，我们可以使用 dotenv-webpack 插件来加载这个文件，然后将其转为 process.env 的键值对。
代码示例：
-- -------------------- ---- -------
-- -----------------
----- ------------------- - --------------------------
-------------- - -
-------- -
--- ----------------------
-- ---
--
-- ---
--上面的配置会自动加载项目根目录下的 .env 文件，并将其中的键值对转为 process.env 的环境变量。
3. 命令行参数
有时候，我们可能需要在启动构建命令时通过命令行参数的方式来传递环境变量。这种方式可以使用 cross-env 和 yargs 插件来实现。
代码示例：
// package.json
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"start": "node index.js"
}
}上面的配置会在构建时通过 cross-env 先将 NODE_ENV 环境变量设置为 production，再执行 webpack 命令。而在代码中，我们可以通过 yargs 来获取到这个值。
代码示例：
-- -------------------- ---- ------- -- ----------------- ----- ---- - ---------------------- ----- ------------- - - -- --- -- -- --------------- - ------------------ - -------------- - -------------- - --------------
这个配置会先通过 yargs 获取到 NODE_ENV 环境变量的值，然后再将其设置为 webpack 的 mode 属性，从而实现多种环境的适配。
实战案例
下面，我们来看一个完整的实战案例，它将演示如何通过 webpack 来处理多种环境变量。
在这个案例中，我们需要实现以下功能：
- 根据不同的环境变量来配置服务端地址和 API 地址
- 根据不同的环境变量来定义打包时的文件名
首先，我们可以先创建一个 .env 文件，用于存放我们的环境变量。
SERVER_BASE=http://localhost:3000 API_BASE=/api APP_TITLE=My App
其中：
SERVER_BASE是我们模拟服务端的地址API_BASE是我们模拟接口的地址，因为只是模拟，所以前面不需要写完整的 urlAPP_TITLE是我们定义的应用标题
然后，我们可以在 webpack.config.js 文件中使用 dotenv-webpack 插件来加载这个文件，并将其转为 process.env 的环境变量。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------------------- - --------------------------
-------------- - ----- -- -
----- ----- - ------------ --- --------------
------ -
----- -------------
------ -----------------
------- -
--------- ----- - ----------- - --------------------------
----- ----------------------- --------
--
---------- -
----- -----
------ -
------- -
------- ----------------
------------ - -------- -- --
--
--
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
------ --------------
--------- -------------------
---
--- ----------------------
--
--
--我们可以看到，在这个配置中，我们将会先根据 env.NODE_ENV 来设置 webpack 的 mode 属性，在之后的打包中就可以方便地使用这个属性。
然后，在 HtmlWebpackPlugin 插件中，我们使用了 env.APP_TITLE 来设置页面的标题。这里我们可以看到，我们可以在多个地方来使用我们定义的环境变量，而不仅仅是在 webpack 配置文件中。
最后，在 devServer 的 proxy 配置中，我们使用 env.SERVER_BASE 来动态配置代理地址。
结论
在多种环境变量的处理中，webpack 是我们最好的帮手。通过使用多种方式来定义和传递环境变量，我们可以轻松地实现不同环境的适配和区分。而在实战中，我们也可以更灵活地利用环境变量，来实现更多个性化定制的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7e1f8c5c563ced5b08ff6