面试题：Webpack环境变量在多环境部署中的应用

Question

假设项目需要部署到开发、测试、生产三个环境，每个环境有不同的API地址等配置，如何利用Webpack进行环境变量管理以实现多环境灵活切换？请阐述实现思路并给出关键的Webpack配置代码。

Answer 1

实现思路

1. 创建不同环境的配置文件：为开发、测试、生产环境分别创建配置文件，如.env.development、.env.test、.env.production，在这些文件中定义各自环境的API地址等环境变量。
2. 安装依赖：使用dotenv-webpack插件来加载环境变量。
3. Webpack配置：在Webpack配置中，根据不同的环境加载对应的环境变量文件，并将其注入到代码中。

关键Webpack配置代码

1. 安装依赖：

npm install dotenv-webpack --save-dev

2. Webpack配置（以webpack.config.js为例）：

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

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

3. 在脚本中使用环境变量：在项目代码中，可以通过process.env来访问环境变量，例如：

const apiUrl = process.env.API_URL;

4. 运行时指定环境：在启动项目或打包时，通过设置NODE_ENV环境变量来指定使用哪个环境的配置，如：

# 开发环境
NODE_ENV=development npm start

# 生产环境
NODE_ENV=production npm run build