如何在Django集成Webpack的React项目中访问环境变量？

问题原因 #

当前Webpack配置仅手动定义了NODE_ENV，未加载.env文件中的变量，导致process.env.base_url无法获取到对应值。

解决方案步骤 #

1. 安装dotenv包

dotenv用于读取.env文件中的环境变量，在app_name目录下执行命令：

npm install dotenv --save-dev
# 或使用yarn
yarn add dotenv -D

2. 修改Webpack配置文件

在webpack.config.js中引入dotenv并加载.env文件，同时通过DefinePlugin注入需要的环境变量：

const path = require("path");
const webpack = require("webpack");
// 引入dotenv并加载当前目录下的.env文件
require('dotenv').config();

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || "development"),
        // 注入.env中定义的base_url变量
        base_url: JSON.stringify(process.env.base_url),
      },
    }),
  ],
};

3. 确保.env文件格式正确

在app_name/.env中定义变量时不要添加引号：

base_url=http://localhost:8000
NODE_ENV=development

4. 在React组件中使用环境变量

现在可以直接在React代码中访问环境变量：

console.log(process.env.base_url);
// 输出：http://localhost:8000

进阶：多环境配置（可选） #

如果需要区分开发/生产环境，可以创建.env.development和.env.production文件，修改dotenv的加载逻辑：

// 根据当前环境加载对应配置文件
const envPath = `.env.${process.env.NODE_ENV || 'development'}`;
require('dotenv').config({ path: envPath });

启动Webpack时可指定环境：

NODE_ENV=production npx webpack

内容的提问来源于stack exchange，提问作者Anonymous