如何从React代码中访问webpack.config.js的mode配置值

方法1：用Webpack的DefinePlugin注入变量 #

这是最直接的方式，通过Webpack内置的DefinePlugin把配置里的mode和对应环境的PayPal ID直接注入到客户端代码中：

1. 修改webpack.config.js：

const webpack = require('webpack');

module.exports = (env, argv) => {
  // 从命令行参数或默认值获取mode
  const currentMode = argv.mode || 'production';
  
  // 集中管理不同环境的PayPal ID，避免重复配置
  const paypalConfig = {
    development: '你的沙箱客户端ID',
    production: '你的正式环境客户端ID'
  };

  return {
    entry: {
      index: "./src/index.js",
      content: "./src/content.js"
    },
    mode: currentMode,
    devtool: currentMode === 'development' ? 'inline-source-map' : 'source-map',
    plugins: [
      new webpack.DefinePlugin({
        // 注入mode值，必须用JSON.stringify转义，否则会被当成变量解析
        'process.env.NODE_ENV': JSON.stringify(currentMode),
        // 直接注入对应环境的PayPal ID，React里不用再判断
        'process.env.PAYPAL_CLIENT_ID': JSON.stringify(paypalConfig[currentMode])
      })
    ],
    ...
  };
};

2. 在React代码中直接使用：

// 获取当前mode
const envMode = process.env.NODE_ENV;

// 直接拿到对应环境的PayPal ID
const paypalClientId = process.env.PAYPAL_CLIENT_ID;

// 初始化PayPal按钮示例
paypal.Buttons({
  clientId: paypalClientId,
  // 其他业务逻辑
}).render('#paypal-button-container');

方法2：用.env文件管理多环境配置（更清晰） #

如果项目有多个环境要维护，用.env文件配合dotenv-webpack插件更规整：

1. 安装依赖：

npm install dotenv-webpack --save-dev

2. 创建对应环境的.env文件：

• .env.development：

PAYPAL_CLIENT_ID=你的沙箱ID

• .env.production：

PAYPAL_CLIENT_ID=你的正式环境ID

3. 修改webpack.config.js：

const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');

module.exports = (env, argv) => {
  const currentMode = argv.mode || 'production';
  
  return {
    entry: {
      index: "./src/index.js",
      content: "./src/content.js"
    },
    mode: currentMode,
    devtool: currentMode === 'development' ? 'inline-source-map' : 'source-map',
    plugins: [
      // 根据mode加载对应的.env文件
      new Dotenv({ path: `./.env.${currentMode}` }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(currentMode)
      })
    ],
    ...
  };
};

4. React代码中同样直接通过process.env.PAYPAL_CLIENT_ID和process.env.NODE_ENV获取值即可。

注意点 #

• 使用DefinePlugin时，务必用JSON.stringify()包裹变量值，否则Webpack会把内容当成代码片段解析，导致报错。
• 用dotenv-webpack时，记得把.env系列文件加入.gitignore，不要提交到版本库。

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