面试题：Webpack环境变量管理在多环境部署中的优化策略

使用不同的配置文件
- 创建多个环境特定的配置文件，如webpack.dev.js、webpack.test.js、webpack.prod.js 等。在每个文件中，针对特定环境设置相应的参数，比如 output 路径、devServer 配置等。同时，对于API地址等配置，可以使用环境变量来管理。
- 例如在 webpack.dev.js 中：

const path = require('path');
module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/dev'),
        filename: 'bundle.js'
    },
    // 其他开发环境相关配置
};

利用 dotenv 库
- 安装 dotenv 库。它可以从 .env 文件中加载环境变量到 process.env 中。
- 在项目根目录下创建不同的 .env 文件，如 .env.development、.env.test、.env.production 等。每个文件中定义该环境特有的变量，例如： .env.development

API_URL=http://dev-api.example.com

.env.production

API_URL=https://api.example.com

- 在Webpack配置文件中，通过 `dotenv - webpack` 插件来加载对应的 `.env` 文件。例如在 `webpack.common.js` 中：

const Dotenv = require('dotenv - webpack');
module.exports = {
    // 其他通用配置
    plugins: [
        new Dotenv({
            path: `./.env.${process.env.NODE_ENV}`
        })
    ]
};

DefinePlugin
- 使用Webpack的 DefinePlugin 来将环境变量注入到代码中。在Webpack配置文件中，添加如下配置：

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地址，例如：

const apiUrl = process.env.API_URL;
fetch(apiUrl + '/data')
  .then(response => response.json())
  .then(data => console.log(data));

脚本管理
- 在 package.json 中定义不同环境的构建脚本。例如：

{
    "scripts": {
        "dev": "NODE_ENV=development webpack - - config webpack.dev.js",
        "test": "NODE_ENV=test webpack - - config webpack.test.js",
        "prod": "NODE_ENV=production webpack - - config webpack.prod.js"
    }
}

- 通过运行不同的脚本，方便地构建不同环境的项目，同时确保使用正确的环境变量和Webpack配置。

5. 版本控制与CI/CD - 将环境配置文件（除了包含敏感信息的，如生产环境的密钥）纳入版本控制，以便团队成员都能获取到最新的配置。对于敏感信息，可以通过CI/CD系统的环境变量设置来处理。 - 在CI/CD流程中，根据目标环境（如部署到测试环境或生产环境）设置相应的环境变量，并触发对应的Webpack构建脚本，确保每次部署都是基于正确的配置。

星途面试题库

面试题：Webpack环境变量管理在多环境部署中的优化策略

知识考点

面试题答案