如何在webpack.config.js中使用环境变量？API_URL为何返回undefined？

1. Dotenv插件作用时机不匹配：你配置的Dotenv是webpack构建阶段的插件，它的作用是把.env文件变量注入到项目业务代码中，而非供webpack.config.js本身使用。webpack.config.js作为Node.js脚本，会在插件执行前完成加载，此时process.env还未从.env文件读取到变量。
2. 代码执行顺序问题：你在module.exports外部的console.log，会在webpack处理env参数、加载Dotenv插件之前就执行，自然拿不到目标变量。

方法一：直接在webpack.config.js中加载.env文件 #

webpack.config.js是Node.js脚本，可直接用dotenv包读取.env文件，无需依赖webpack插件。

1. 安装dotenv依赖：

npm install dotenv --save-dev

2. 修改webpack.config.js，在顶部根据环境加载对应.env文件：

const dotenv = require('dotenv');
const path = require('path');
const deps = require("./package.json").dependencies;

// 根据环境加载对应.env文件
const envPath = `./.env${process.env.NODE_ENV ? `.${process.env.NODE_ENV}` : ''}`;
dotenv.config({ path: path.resolve(__dirname, envPath) });

// 此时已能获取API_URL
console.log({API_URL: process.env.API_URL});

module.exports = (env) => {
  // 这里也可正常使用process.env.API_URL
  console.log({API_URL: process.env.API_URL})
  return {
    mode: env.file,
    output: {
      publicPath: "http://localhost:8000/",
    },
    resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
      alias: {
        'react': path.resolve(__dirname, 'node_modules/react'),
        'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
      }
    },
    devServer: {
      port: 8000,
      historyApiFallback: true,
    },
    module: {
      rules: [...],
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./public/index.html",
      }),
      // 该插件可保留，用于给业务代码注入环境变量
      new Dotenv({
        path: envPath
      })
    ],
  }
};

方法二：通过命令行传递环境变量 #

启动webpack时直接通过命令行传入环境变量，Node.js会将其加入process.env，webpack.config.js可直接读取：

启动开发环境示例：

API_URL=http://your-api-domain.com npm run dev

也可在package.json的scripts中配置：

"scripts": {
  "dev": "API_URL=http://your-api-domain.com webpack serve --env file=development",
  "build": "API_URL=http://prod-api-domain.com webpack --env file=production"
}

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