在前端开发中，我们使用 webpack 来进行模块化打包，而使用环境变量来控制不同环境（开发、测试、生产）的配置也是非常普遍的。但是每次手动处理环境变量的配置信息，无论是繁琐还是容易出错，都会影响我们的工作效率和开发质量。而 webpack-dotenv-extended-plugin 这个 npm 包，可以帮助我们自动加载环境变量，并且支持在不同环境中进行配置管理。
安装与配置
首先，我们需要安装 webpack-dotenv-extended-plugin：
npm install --save-dev webpack-dotenv-extended-plugin
安装完成后，在 webpack 的配置文件中使用该插件：
const DotEnvPlugin = require('webpack-dotenv-extended-plugin');
module.exports = {
// ...其他配置
plugins: [
new DotEnvPlugin(),
],
};当无任何配置时，该插件会直接加载 .env 文件中的环境变量至 webpack 运行环境。同时，它还支持通过一个可选参数将环境变量加载至客户端代码中。示例如下：
new DotEnvPlugin({
// 将 .env 文件中的环境变量通过 webpack.DefinePlugin 定义在浏览器端
systemvars: true,
}),此时，我们的 .env 文件就不再需要手动使用 dotenv 包来进行处理，webpack 可以直接使用其中的环境变量。同时，该插件的使用还包含如下的配置项：
-- -------------------- ---- -------
----- ------------ - ------------------------------------------
--- --------------
-- ------- -----
--------- ---------
-- -- -------- ------
--------- ------------------
---- --------- - ---------------------
-- - -------- -----------
----------- -----
-- -------
---------- -
--------------- -----------------------------------
--
-- -- ----- --
------ -----
--当我们需要在不同环境下进行不同的配置时，可以通过上面的示例代码中的 defaults 和 env 配置项来实现，同时，该插件会自动合并不同环境的配置。还可以通过 systemvars 参数让这些环境变量在浏览器中使用 process.env 来访问。同时，它还支持在客户端代码中定义环境变量，例如在 Vue.js 项目中：
new DotEnvPlugin({
variables: {
VUE_APP_MY_VAR: JSON.stringify(process.env.MY_VAR),
},
}),使用示例
-- -------------------- ---- -------
-- ----
-- ----------------
--------------------------------------------------------
-- ---------------
--------------------------------------------
-- ------- ----
----- ------------ - ------------------------------------------
-------------- - -
------ --------------
-------- -
--- --------------
----------- -----
--------- ------------------
---- --------- - ---------------------
---
--
-- -------
--在以下的代码中，我们可以使用 process.env.VUE_APP_API_BASE_URL 读取配置文件的值。
// 业务代码
axios.get(`${process.env.VUE_APP_API_BASE_URL}/user/1`).then(res => {
console.log(res);
})在开发模式下，该请求会发往 https://api-development.example.com/user/1；而在生产模式下，则是 https://api.example.com/user/1。
总结
通过使用 webpack-dotenv-extended-plugin 这个 npm 包，我们可以方便地管理和使用环境变量，并且支持在不同环境中进行配置管理。它的使用方式和配置也非常灵活，可以适用于各种不同的场景。这个插件的使用应该可以让我们的开发更加高效和便捷，值得我们一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671038dd3466f61ffdc5d