面试题：Webpack环境变量在开发和生产环境中的配置与使用

Question

在Webpack项目中，如何配置开发环境和生产环境不同的环境变量？请举例说明如何在代码中获取并使用这些环境变量。

Answer 1

1. 配置开发环境和生产环境不同的环境变量

• 使用 dotenv 库：
  • 安装 dotenv：npm install dotenv --save-dev。
  • 在项目根目录创建 .env.development 和 .env.production 文件，分别用于开发和生产环境的配置。例如，.env.development 可以写：API_URL=http://localhost:3000/api，.env.production 可以写：API_URL=https://example.com/api。
  • 在 Webpack 配置文件（一般是 webpack.config.js）中引入 dotenv 并配置：

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

• 然后在启动脚本中设置 NODE_ENV 环境变量。在 package.json 中：

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

• 使用 DefinePlugin：
  • 在 Webpack 配置文件中使用 DefinePlugin：

const webpack = require('webpack');
module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.NODE_ENV === 'development'? 'http://localhost:3000/api' : 'https://example.com/api')
    })
  ]
};

• 同样在 package.json 中设置 NODE_ENV 环境变量启动脚本。

2. 在代码中获取并使用这些环境变量

• 在 JavaScript 代码中：
  • 如果使用 dotenv，可以直接通过 process.env 获取。例如：

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

• 如果使用 DefinePlugin，获取方式类似，因为 DefinePlugin 也是注入到 process.env 中：

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

• 在 React 项目中：
  • 对于 React 应用，在 src 目录下创建 .env.development 和 .env.production 文件（React 内置支持这种方式）。
  • 在组件中获取：

import React from'react';

const apiUrl = process.env.REACT_APP_API_URL;
function App() {
  return (
    <div>
      <p>API URL: {apiUrl}</p>
    </div>
  );
}

export default App;

• 注意，在 React 中环境变量需要以 REACT_APP_ 前缀命名才能在代码中被 process.env 访问到。