面试题：Webpack结合dotenv处理多环境变量

Question

在一个Webpack项目中，存在开发、测试、生产三种环境，需要使用dotenv工具配置不同环境的变量。请阐述如何组织.env文件以及在Webpack配置中如何区分并正确加载不同环境下的变量。

Answer 1

1. 组织.env文件

• 创建不同环境的.env文件：
  • 在项目根目录下创建.env.development、.env.test、.env.production文件，分别对应开发、测试、生产环境。例如，.env.development文件中可以定义API_URL=http://localhost:3000/api ，.env.production中定义API_URL=https://your-production-server.com/api。
  • 同时，还可以创建一个.env文件作为公共环境变量的配置文件，比如一些所有环境都通用的配置，如APP_NAME=MyApp。这样，dotenv在加载环境变量时，会先加载.env中的公共变量，再根据当前环境加载特定环境的变量，特定环境变量会覆盖公共变量中同名的变量。

2. 在Webpack配置中区分并加载变量

• 安装dotenv依赖：在项目根目录下执行npm install dotenv --save-dev 或者yarn add dotenv -D。
• 在Webpack配置文件中加载变量：
  • 在Webpack配置文件（通常是webpack.config.js）中，根据不同的环境加载不同的.env文件。例如，可以使用cross - env 来设置环境变量，然后在Webpack配置中读取这个环境变量。

  const dotenv = require('dotenv');
  const path = require('path');
  const env = process.env.NODE_ENV || 'development';
  dotenv.config({ path: path.join(__dirname, `.env.${env}`) });
  dotenv.config({ path: path.join(__dirname, `.env`) });// 加载公共.env文件
  module.exports = {
      // Webpack其他配置...
      // 可以在DefinePlugin中使用这些环境变量
      plugins: [
          new webpack.DefinePlugin({
              'process.env': JSON.stringify(process.env)
          })
      ]
  };
  

  • 这样，在项目代码中就可以通过process.env来访问这些环境变量，比如const apiUrl = process.env.API_URL。

  • 如果使用Webpack的开发服务器（如webpack - dev - server），还可以在启动脚本中设置环境变量，例如在package.json的scripts中：

  {
      "scripts": {
          "start": "cross - env NODE_ENV=development webpack - dev - server",
          "test": "cross - env NODE_ENV=test webpack - cli --config webpack.test.js",
          "build": "cross - env NODE_ENV=production webpack - cli --config webpack.production.js"
      }
  }
  

  这样在不同的脚本执行时，会根据设置的NODE_ENV加载相应的.env文件中的环境变量。