使用 webpack 构建应用程序时如何更改 NODE_ENV？

Question

我有一个.env包含该NODE_ENV变量的文件。默认情况下，它设置为development。当使用 webpack 构建 React 应用程序时，我启动命令yarn build：

"scripts": {
    "start": "NODE_ENV=development webpack serve --open --hot",
    "build": "NODE_ENV=production && webpack",
}

该.env文件是：

NODE_ENV = "development"

但是当NODE_ENV在我的 webpack 配置文件中记录该值时，我可以看到它仍然在development. 构建也没有缩小。但是当我写入production文件时.env，一切正常。

webpack 配置为：

/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProductionMode = (mode) => mode === "production";

module.exports = () => {
  const env = require("dotenv").config({ path: __dirname + "/.env" });
  const nodeEnv = env.parsed.NODE_ENV;
  console.log(" isProduction", isProductionMode(nodeEnv)) // output: false
  return {
    mode: nodeEnv,
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "./dist"),
      filename: "[name].[contenthash].bundle.js",
      publicPath: "/",
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
      alias: {
        api: path.resolve(__dirname, "src/api/"),
        assets: path.resolve(__dirname, "src/assets/"),
        components: path.resolve(__dirname, "src/components/"),
        containers: path.resolve(__dirname, "src/containers/"),
        data: path.resolve(__dirname, "src/data/"),
        i18n: path.resolve(__dirname, "src/i18n/"),
        models: path.resolve(__dirname, "src/models/"),
        pages: path.resolve(__dirname, "src/pages/"),
        routes: path.resolve(__dirname, "src/routes/"),
        src: path.resolve(__dirname, "src/"),
        stores: path.resolve(__dirname, "src/stores/"),
        utils: path.resolve(__dirname, "src/utils/"),
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.(png|jpg|jpeg|woff2)$/, use: ["file-loader"] },
        {
          test: /\.svg$/,
          use: [
            { loader: "babel-loader" },
            {
              loader: "react-svg-loader",
              options: {
                jsx: true,
              },
            },
          ],
        },
      ],
    },
    devServer: {
      historyApiFallback: true,
      port: 3000,
      inline: true,
      hot: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        favicon: "./src/assets/images/favicon.png",
      }),
      new Dotenv(),
    ],
    optimization: {
      minimize: isProductionMode(nodeEnv),
      minimizer: isProductionMode(nodeEnv)
               ? [new TerserPlugin(), new CssMinimizerPlugin()]
               : [],
      splitChunks: {
        chunks: "all",
      },
    },
  };
};

因此问题是：如何确保我可以NODE_ENV在启动构建时更改我的？

package.json另外，一旦 dist 文件夹上传到 Netlify 或类似的托管平台，我应该在 my 中编写什么命令来启动构建？

Answer 1

尝试检查而process.env.NODE_ENV不是是否env.parsed.NODE_ENV要考虑命令行上传递的环境变量。这些将作为属性公开process.env- 并将优先于从 .env 文件加载的变量 - 但不作为 .parsed返回的对象的属性require("dotenv").config()。这两个对象实际上并没有保持同步。

您可以尝试这个简单的节点程序：

process.env.NODE_ENV = "production"   // simulate command line environment variable
var env = require("dotenv").config()

console.log(process.env.NODE_ENV)     // output: "production"
console.log(env.parsed.NODE_ENV)      // output: "development"

// .env
NODE_ENV=development

编辑：只是为了完成，只需确保使用适合您的操作系统的语法在命令行上设置环境变量，或使用与操作系统无关的cross-env包来实现此目的。

// package.json
"scripts": {
  "build:dev": "webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
},

// .env
NODE_ENV=development

// webpack.config.js
const dotenv = require("dotenv")

dotenv.config()
console.log(process.env.NODE_ENV)

process.exit(0)

// console output
npm run build:dev      // "development"
npm run build:prod     // "production"

另外，正如我在下面的评论中指出的，您可以使用该标志通过 webpack CLI--node-env设置环境变量。NODE_ENV

"build:prod": "webpack --node-env=production"