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

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

我最终在 webpack.config 的以下片段中用“development”替换了“production”：

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

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

Answer 2

尝试改变

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 3

您是说您“尝试运行开发模式”。 根据您的 package.json 这意味着运行：

webpack --mode development --watch（注意：v4 语法）

1. 那个 mode 参数已经设置了 webpack's own mode，即 webpack 运行时使用的模式，意思是在“构建时间”，或者“编译时间”，如果你会的。
2. 当您尝试为“运行时间”（不同于“构建时间”）定义该变量时，DefinePlugin 会检查该变量，并且因此，如果两者不同 (code here)，则会警告您。

解决方案：确保您的 webpack.config 对象（或在 CLI 命令中，在配置对象中覆盖它）中的 mode 与您传递给的相同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 读取环境变量，以及从第二个参数 {{1} 读取 webpack CLI options }：

argv

PS：您正在使用 Webpack@4。如果您使用 Webpack@5，则必须将 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) }) ] // ... }; }; 更改为 webpack --mode development --watch。

Answer 4

此错误表示您尝试在 process.env.NODE_ENV 调用中重新分配 DefinePlugin，其值与之前不同。

您可以通过将 mode 选项添加到 config 或将 nodeEnv 键添加到 optimization 来隐式设置它。或者在运行 webpack 之前设置环境变量。

看起来这就是你的情况。您在某处设置 NODE_ENV=development，运行 webpack，然后您尝试将其重新分配给 production。

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