如何根据模式访问 .env 变量答案

【问题标题】：How to access .env variable based on the mode如何根据模式访问 .env 变量
【发布时间】：2022-01-02 15:39:59
【问题描述】：

假设我有两个文件，分别是 .env.development 和 .env.production。

在我的package.json中，由于模式是开发模式，它应该访问.env.development的变量。

  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js"

webpack.config.js

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

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

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.jsx"),
  devtool: "source-map",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  devServer: {
    port: 3000,
    static: true,
    historyApiFallback: true,
    open: true,
  },
  resolve: {...},
  module: {...},
  plugins: [
    new Dotenv(),
    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",
    }),
  ],
};

这样在前端，当我使用process.env时，它会访问.env.development中的变量。

有什么办法吗？

【问题讨论】：

标签： javascript reactjs webpack dotenv

【解决方案1】：

您可以在 npm 脚本的开头设置系统环境变量NODE_ENV。使用此环境变量来控制构建的环境。

例如

package.json:

"scripts": {
  "build:dev": "webpack",
  "build": "NODE_ENV=production webpack",
  "dev": "webpack serve"
}

webpack.config.js:

const path = require("path");
const Dotenv = require("dotenv-webpack");

const mode =
  process.env.NODE_ENV === "production" ? "production" : "development";

console.log("mode: ", mode);

module.exports = {
  mode,
  entry: path.resolve(__dirname, "./src/index.jsx"),
  devtool: "source-map",
  output: {
    path: path.join(__dirname, "./dist"),
    clean: true,
  },
  devServer: {
    port: 3000,
    static: true,
    historyApiFallback: true,
    open: true,
  },
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, `./.env.${mode}`),
    }),
  ],
};

.env.development:

PWD=123456

.env.production:

PWD=a)d4125z

对于开发构建npm run build:dev，./dist/main.js的输出：

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!***********************!*\
  !*** ./src/index.jsx ***!
  \***********************/
console.log("PWD: ", "123456");

/******/ })()
;
//# sourceMappingURL=main.js.map

对于生产版本npm run build，输出：

console.log("PWD: ","a)d4125z");
//# sourceMappingURL=main.js.map

【讨论】：