简介
在前端项目中，常常需要以环境变量的形式存放不同环境所需的配置信息，例如 API 地址、密钥等。而 webpack 是前端最常用的构建工具之一，可以对不同环境进行打包。为了方便管理环境变量，我们可以使用 dotenv 插件，它可以从一个 .env 文件中读取配置信息并注入到代码中。但是，当我们的项目需要同时支持多个环境时，.env 文件会变得很臃肿，管理也会变得复杂。此时，我们可以使用 @mjk/webpack-dotenv-extended-plugin 插件对 .env 文件进行拆分和扩展，方便管理多个环境。
安装
使用 npm 安装：
npm install @mjk/webpack-dotenv-extended-plugin --save-dev
使用
在 webpack 的配置文件中加入以下代码：
-- -------------------- ---- -------
----- -------------- - -----------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
-- --------------- -------- --
----- ---------------------------------
-- ----------
--------- ---------
-- ----------------
------- ------
---
--
-- ---
--配置信息
path：配置文件的路径，使用${process.env.NODE_ENV}让插件可以动态计算配置文件的路径。例如当NODE_ENV为production时，插件会读取.env.production文件中的配置信息。defaults：用于加载基础环境变量的路径。如果没有指定，则默认加载.env文件。silent：是否在控制台输出已加载的环境变量。默认为false。
使用示例
假设我们有以下的环境变量：
// .env.development API_URL=http://localhost:3000
// .env.production API_URL=https://api.example.com
在代码中，我们可以通过 process.env.API_URL 来访问配置信息：
console.log(process.env.API_URL); // 在开发环境中输出 http://localhost:3000，在生产环境中输出 https://api.example.com
总结
在多环境开发时使用 @mjk/webpack-dotenv-extended-plugin 插件可以更方便地管理环境变量，代码简洁、管理清晰。插件功能强大，可以满足不同项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447e6