如何在webpack中根据运行模式加载对应.env文件的环境变量

解决步骤 #

1. 修改package.json脚本，区分不同运行模式

给启动和打包命令加上--mode参数显式指定运行模式：

"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
  "build": "webpack --config ./webpack.config.js --mode production"
}

2. 改写webpack配置为动态导出函数

webpack支持将配置导出为函数，函数会接收命令行传入的参数，我们可以从参数中拿到当前运行的mode值，动态加载对应的.env文件：

const webpack = require("webpack");
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

// 导出函数，第二个参数argv包含命令行传入的mode值
module.exports = (env, argv) => {
  const mode = argv.mode || "development"; // 兜底默认是开发模式
  return {
    mode: mode,
    entry: path.resolve(__dirname, "./src/index.jsx"),
    devtool: mode === "development" ? "source-map" : false, // 生产模式可以关闭source-map优化性能
    output: {
      path: path.join(__dirname, "/dist"),
      filename: "bundle.js",
    },
    devServer: {
      port: 3000,
      static: true,
      historyApiFallback: true,
      open: true,
    },
    resolve: {...},
    module: {...},
    plugins: [
      // 给Dotenv指定加载对应模式的env文件
      new Dotenv({
        path: path.resolve(__dirname, `.env.${mode}`),
        // 可选配置：如果有公共的环境变量可以放在.env文件，通过defaults参数加载
        // defaults: path.resolve(__dirname, '.env')
      }),
      new HtmlWebpackPlugin({
        template: "public/index.html",
        filename: "index.html",
        favicon: "public/favicon.ico",
      }),
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
      }),
      new webpack.ProvidePlugin({
        process: "process/browser",
      }),
    ],
  }
};

3. 验证效果

分别在.env.development和.env.production文件中定义变量，比如：

# .env.development
APP_API_URL = http://localhost:8080/api

# .env.production
APP_API_URL = https://your-production-domain.com/api

在前端代码中直接使用process.env.APP_API_URL即可获取到对应模式下的变量值。

注意：前端代码中使用的环境变量会在打包时被硬编码到输出的bundle文件中，不要存放密钥、密码等敏感信息。

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