面试题：Webpack环境变量管理之高级难度问题

Question

假设你有一个多环境（开发、测试、生产）的Webpack项目，不同环境下API地址不同。请阐述如何通过Webpack配置实现动态切换环境变量来指向不同的API地址，同时要考虑到安全性，避免敏感信息暴露在前端代码中。

Answer 1

1. 使用 dotenv 库：
   • 安装 dotenv：npm install dotenv --save -dev。
   • 在项目根目录下，针对不同环境创建 .env.development、.env.test、.env.production 文件。例如，.env.development 中可以写 API_URL=http://dev - api.example.com，.env.production 中可以写 API_URL=http://prod - api.example.com。
   • 在 Webpack 配置文件（通常是 webpack.config.js）中引入 dotenv：

const dotenv = require('dotenv');
dotenv.config({ path: `.env.${process.env.NODE_ENV}` });

2. 使用 DefinePlugin：
   • 在 Webpack 配置的 plugins 部分添加 DefinePlugin：

const webpack = require('webpack');
module.exports = {
    //...其他配置
    plugins: [
        new webpack.DefinePlugin({
            'process.env.API_URL': JSON.stringify(process.env.API_URL)
        })
    ]
};

• 这样在前端代码中就可以通过 process.env.API_URL 访问到对应的 API 地址，例如在 fetch 调用中：

fetch(process.env.API_URL + '/some - endpoint')
  .then(response => response.json())
  .then(data => console.log(data));

3. 安全性考虑：
   • 绝对不要将敏感信息（如 API 密钥等）放在客户端可访问的环境变量中。对于需要认证的 API，应在服务器端进行认证和转发。
   • 可以在服务器端设置代理，在开发环境中，Webpack Dev Server 可以配置代理来转发 API 请求，避免跨域问题同时隐藏真实的 API 地址。例如在 webpack.config.js 中：

module.exports = {
    //...其他配置
    devServer: {
        proxy: {
            '/api': {
                target: 'http://dev - api.example.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

• 在生产环境，可以使用 Nginx 等服务器软件配置反向代理，进一步增强安全性。