面试题：Webpack环境变量管理之基础配置

Question

在Webpack项目中，如何通过Webpack配置文件设置和使用简单的环境变量？请说明具体的配置步骤以及在代码中如何获取这些环境变量。

Answer 1

配置步骤

1. 安装 dotenv 库： 在项目根目录下运行 npm install dotenv --save-dev，dotenv 可以从 .env 文件中加载环境变量到 process.env 中。
2. 创建 .env 文件： 在项目根目录创建 .env 文件，例如：

   API_URL = https://example.com/api
   

3. 在Webpack配置文件中使用 dotenv： 引入 dotenv，并在Webpack配置中设置：

   const dotenv = require('dotenv');
   const path = require('path');
   
   const env = dotenv.config({ path: path.join(__dirname, '.env') }).parsed;
   
   const webpackConfig = {
       // 其他配置项
       plugins: [
           // 使用DefinePlugin将环境变量注入到代码中
           new webpack.DefinePlugin({
               'process.env': JSON.stringify(env)
           })
       ]
   };
   
   module.exports = webpackConfig;
   

在代码中获取环境变量

1. 在JavaScript代码中：

   console.log(process.env.API_URL);
   

2. 在React组件中：

   import React from'react';
   
   const App = () => {
       return <div>{process.env.API_URL}</div>;
   };
   
   export default App;
   

以上示例以在JavaScript和React项目中获取环境变量为例，实际获取方式在不同框架和场景下基本类似，通过 process.env.环境变量名 获取。