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

Posted 2023-02-22

【中文标题】webpack 警告 - DefinePlugin 中的警告 \'process.env.NODE_ENV\' 的冲突值

【英文标题】：webpack warning - WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV'webpack 警告 - DefinePlugin 中的警告 'process.env.NODE_ENV' 的冲突值

【发布时间】：2021-06-20 15:37:14

【问题描述】：

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

这是我的 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"),
      ,
    ),
  ],
;

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

【问题讨论】：

你检查过this吗？

【参考方案1】：

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")。 基本上，将其与您正在运行的模式类型相匹配。

【参考方案2】：

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

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

mode parameter 是 webpack 运行时使用的模式，表示在“构建时间”（或“编译时间”）期间。 DefinePlugin 在您尝试为“运行时间”（不同于“构建时间”）定义该变量时检查该变量，并因此发出警告如果两者不同（code here）。

解决方案

确保您的 webpack.config 对象中的mode（或在配置对象中覆盖它的 CLI 命令中）与您传递给 DefinePlugin 的那个相同。

如何访问webpack.config.js中的webpack CLI参数？

如果您希望能够从 CLI 或 package.json 脚本提供 mode 参数，并且仍然让 DefinePlugin 不发出警告（这意味着您从 CLI 获取该值并将其插入DefinePlugin)，这样做：

将webpack.config.js 的内容从module.exports = mode: ..., rules: ... ;（或export default ... ）配置object 更改为function，如下所示。 这个函数的工作原理完全相同（你return最终的配置对象），但允许从第一个参数env读取环境变量，以及从第二个参数webpack CLI options读取环境变量argv：

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"，而后者替换了所有出现的@987654351 @ 与 "NODE_ENV": "X" 。反过来，这可能会弄乱其他环境变量。示例：process.env.Y 将变为 ( "NODE_ENV": "X" ).Y，即 undefined。

【讨论】：

如果您已经通过 DefinePlugin 自己定义了模式，您可以将 optimization.nodeEnv 更改为 false 以防止模式设置 NODE_ENV。

【参考方案3】：

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

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

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

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

【参考方案4】：

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

我最终在 webpack.config 的以下 sn-p 中将“生产”替换为“开发”：

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

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

【讨论】：

Webpack 有一个算法来摆脱无法访问的代码。所以在 React 中有很多 if process.env.NODE_ENV === "development" （只是一个例子）在为其他环境构建时应该被删除。你应该保留production，因为它会让你的包更轻

@ser 这是否意味着我们应该忽略警告？

【参考方案5】：

尝试改变

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')
    )
]