在前端开发过程中，我们经常需要处理各种环境变量，如数据库地址、API 地址等。为了方便管理这些变量，我们可以使用 dotenv-webpack 这个 npm 包。它可以将 .env 文件中的变量注入到我们的应用程序中。
安装
在项目根目录下使用 npm 安装 dotenv-webpack：
npm install dotenv-webpack --save-dev
配置
创建 .env 文件
在项目根目录下创建 .env 文件，并在其中添加变量：
DB_HOST=localhost DB_USER=root DB_PASS=s1mpl3
webpack.config.js 中配置
在 webpack 的配置文件中引入并配置 dotenv-webpack，如下所示：
-- -------------------- ---- ------- ----- ------ - -------------------------- -------------- - - -- --- -------- - --- --------- -- -- --- --展开代码
这就完成了 dotenv-webpack 的基本配置。
使用
现在，我们就可以在代码中使用环境变量了：
console.log(process.env.DB_HOST); console.log(process.env.DB_USER); console.log(process.env.DB_PASS);
这里的 process.env 是 Node.js 中的全局对象，可以直接访问环境变量。
示例代码
完整的示例代码如下所示：
-- -------------------- ---- ------- -- ----------------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- ------ - -------------------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- -------- -- -------- - --- ------------------- --------- ------------------- --- --- --------- -- ---------- - ------------ -------------------- -------- --------- ----- ----- ----- -- -- -- ---- ----------------- ------------ -------------- -- ------------ --------------------------------- --------------------------------- ---------------------------------展开代码
总结
使用 dotenv-webpack 可以方便地管理环境变量，提高开发效率。但是需要注意，.env 文件中的变量仅仅是开发环境下的配置，不应该包含敏感信息，如密码等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54940
