在实际开发中，前端应用需要在不同的环境下进行部署和运行，如开发、测试、预生产和生产环境等。对于一个前端项目而言，可能需要配置多个不同的服务器地址、API 地址、日志级别等信息。为了避免频繁修改代码，我们可以使用 Webpack 的环境变量来实现多环境配置。
环境变量简介
在 Linux/Unix 系统中，环境变量是一种全局变量，用于存储在操作系统中可用的信息，如系统路径、用户名、语言等。在 Node.js 中，我们可以使用 process.env 对象访问环境变量。
例如，在命令行中执行以下命令：
$ NODE_ENV=production node server.js
就可以在 Node.js 应用中读取 NODE_ENV 变量的值：
const env = process.env.NODE_ENV; // 'production'
我们可以通过设置不同的环境变量值，来控制程序的行为。在前端开发中，我们可以使用 Webpack 来管理环境变量，并根据环境变量值的不同，自动加载对应的配置文件或代码。
Webpack 环境变量配置
在 Webpack 中，我们可以通过以下方式定义环境变量：
- 使用
webpack.DefinePlugin插件设置全局变量 - 通过命令行参数传递环境变量
使用 DefinePlugin 插件
webpack.DefinePlugin 插件可以用于创建一个在编译时可以配置的全局常量。我们可以将某些值设为环境变量，从而在代码中使用。
例如，在 webpack.config.js 文件中定义：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------------------------- -----------------------------------------
------------------------ --------------------------------------
---
--
--这里将 API_BASE_URL 和 LOG_LEVEL 两个环境变量设置为全局常量。在代码中，我们可以直接使用它们：
const apiUrl = process.env.API_BASE_URL || '/api'; const logLevel = process.env.LOG_LEVEL || 'info';
在实际应用中，我们通常会根据不同的环境，设置不同的变量值。例如，在开发环境中，我们可能希望使用本地的 API 地址，而在生产环境中则需要使用线上的 API 地址。
命令行参数传递环境变量
除了使用 DefinePlugin 插件方式外，我们还可以通过命令行参数来传递环境变量。例如，在执行 Webpack 命令时，添加以下参数：
$ NODE_ENV=production API_BASE_URL=https://www.example.com/api LOG_LEVEL=warn webpack
这里通过命令行参数设置了 NODE_ENV、API_BASE_URL 和 LOG_LEVEL 三个环境变量。在 Webpack 的配置文件中，我们可以使用 process.env 对象来访问这些环境变量：
const apiUrl = process.env.API_BASE_URL || '/api'; const logLevel = process.env.LOG_LEVEL || 'info';
示例代码
下面是一个基于 Webpack 的多环境配置示例：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - ----- -- -
----- ------ - ------------ --- -------------
-- ------------ --- --
----- ------ - ------ - ----------------------------- - ----------------------------
------ -
-- ---
-------- -
--- ----------------------
--------------------------- -----------------------
------------------------ ----
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------