webpack 警告 - DefinePlugin 中的警告“process.env.NODE_ENV”的值冲突

Question

当我尝试运行开发模式时，我收到标题中的警告。该脚本过去在早期网站上运行良好，但现在我总是收到此警告。

这是我的package.json：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "react-router-dom": "^5.2.0"
  }
}

还有我的 webpack.config.js：

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

我到处搜索，但找不到与此警告类似的内容。

Answer 1

尝试改变

new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),

到

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV' : JSON.stringify('production')
    })
]

Answer 2

你是说你“尝试运行开发模式”。 根据你的

package.json

，这意味着跑步：

webpack --mode development --watch

（注意：v4 语法）

1. mode

   参数是webpack运行时使用的模式，意思是在“build time”（或“compile time”）期间。
2. 当您尝试为“

   运行时

   ”（与“构建时间”不同）定义该变量时，DefinePlugin会检查该变量，因此如果两者不同，则会警告您（此处的代码） .

解决方案

确保 webpack.config 对象中的

mode

（或在 CLI 命令中，在配置对象中覆盖它）与您传递给

DefinePlugin

的内容相同。

如何访问

webpack.config.js

中的webpack CLI参数？

如果您希望能够从 CLI 或

mode

脚本提供

package.json

参数，并且仍然让

DefinePlugin

不发出警告（意味着您从 CLI 获取该值并将其插入到

DefinePlugin 

），这样做：

将

webpack.config.js

的内容从

module.exports = { mode: ..., rules: ... };

（或

export default { ... }

）配置

object

更改为

function

，如下所示。 该函数的工作原理完全相同（您

return

最终的配置对象），但允许从第一个参数

env

读取环境变量，以及从第二个参数argv读取

webpack CLI选项

：

module.exports = (env, argv) => {
  // `mode` is `'XX'` if you ran webpack like so: `webpack watch --mode XX` (v5 syntax)
  const mode = argv.mode || 'development'; // dev mode by default

  // ...

  return {
    mode,   // this is optional, since webpack already knows the `mode` from the CLI parameter
    // ...
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(mode)
      })
    ]
    // ...
  };
};

PS：您正在使用Webpack@4。如果你使用Webpack@5，你就必须改变

webpack --mode development --watch

到

webpack watch --mode development

.

PPS：始终优先选择

'process.env.NODE_ENV': JSON.stringify('X')

而不是

'process.env': JSON.stringify({ NODE_ENV: 'X' })

，因为前者将代码中所有出现的

process.env.NODE_ENV

安全地替换为

"X"

，而后者则将所有出现的

process.env

替换为

{ "NODE_ENV": "X" }

。这反过来可能会扰乱其他环境变量。示例：

process.env.Y

将变为

({ "NODE_ENV": "X" }).Y

，即

undefined

。

Answer 3

谢谢大家的帮助，非常感谢！

我最终在 webpack.config 的以下代码片段中将“生产”替换为“开发”：

plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ]

它消除了警告，但我想知道这会产生什么影响。

Answer 4

此错误意味着您尝试在

process.env.NODE_ENV

调用中使用与之前不同的值重新分配

DefinePlugin

。

您可以通过在配置中添加

mode

选项或将

nodeEnv

键添加到

optimization

来隐式设置它。或者在运行 webpack 之前设置环境变量。

看起来这就是你的情况。您在某处设置了

NODE_ENV=development

，运行了 webpack，然后尝试将其重新分配给

production

。

检查你如何运行 webpack 和 NODE_ENV 环境值。

Answer 5

The value in  NODE_ENV: JSON.stringify("this_value_here") 
should match the value inside package.json "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  }, 

如果您正在跑步

"npm run dev"

，请保留

JSON.stringify("development")

，如果您正在跑步

"npm run build"

，请将其更改为

JSON.stringify("production")

。 基本上，将其与您正在运行的模式类型相匹配。

Answer 6

尝试下一步：

1）在你的package.json中

"scripts": {
  "start": ...
  "lint": ...
  "serve": "NODE_ENV=production webpack serve",
}

2) 在您的控制台中：

npm run serve

Answer 7

尝试改变

new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),

到

new webpack.DefinePlugin({
            "process.env": {
                // This has effect on the react lib size
                NODE_ENV: JSON.stringify("development"),
            },
        })