面试题：Webpack中dotenv在多环境下的应用

Question

假设你的项目有开发、测试、生产三个环境，每个环境有不同的API地址等环境变量。请阐述如何利用dotenv工具实现不同环境的变量隔离与加载？在Webpack配置文件中需要做哪些相应的调整？

Answer 1

利用dotenv工具实现不同环境变量隔离与加载的步骤

1. 安装dotenv：在项目根目录下通过npm或yarn安装dotenv，例如npm install dotenv --save-dev。
2. 创建环境变量文件：
   • 在项目根目录创建.env.development、.env.test、.env.production分别对应开发、测试、生产环境。例如，.env.development文件中可以写API_URL=http://dev-api.example.com。
   • 同时可以创建一个.env文件作为通用的环境变量文件，其中的变量会在各个环境中都被加载，比如一些通用的配置。
3. 加载环境变量：
   • 在Node.js应用入口文件（通常是index.js或server.js等）中，根据当前环境加载对应的环境变量文件。例如，在Node.js中可以这样写：

const dotenv = require('dotenv');
const env = process.env.NODE_ENV || 'development';
if (env === 'development') {
    dotenv.config({ path: '.env.development' });
} else if (env === 'test') {
    dotenv.config({ path: '.env.test' });
} else if (env === 'production') {
    dotenv.config({ path: '.env.production' });
} else {
    dotenv.config();
}

• 这样就可以根据NODE_ENV环境变量加载不同环境的配置。

Webpack配置文件的相应调整

1. 使用dotenv-webpack插件：安装dotenv-webpack插件，npm install dotenv-webpack --save-dev。
2. 配置Webpack：在Webpack配置文件（通常是webpack.config.js）中添加如下配置：

const Dotenv = require('dotenv-webpack');

module.exports = {
    // 其他Webpack配置...
    plugins: [
        new Dotenv({
            path: `./.env.${process.env.NODE_ENV}`,
            systemvars: true
        })
    ]
};

• path指定了要加载的环境变量文件路径，根据NODE_ENV动态加载对应文件。
• systemvars: true表示允许访问系统环境变量，这样在Webpack构建过程中，process.env中就会包含加载的环境变量，使得在前端代码中也能使用这些环境变量，例如在React应用中可以通过process.env.API_URL访问API地址。