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

IT技术 node.js reactjs npm webpack babeljs
2021-05-06 05:50:06

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

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

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

4个回答

尝试改变

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

感谢大家的帮助,非常感谢!

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

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

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

您是说您“尝试运行开发模式”。根据你的package.json意思是运行:

webpack --mode development --watch (注意:v4 语法)

  1. mode参数是 webpack 运行时使用的模式,意思是在“构建时间”(或“编译时间”)期间。
  2. DefinePlugin当您尝试为“运行时”(不同于“构建时”)定义该变量时,会检查该变量,从而在两者不同时向您发出警告(此处的代码)。

解决方案

确保mode在你的 webpack.config 对象(或在 CLI 命令中,它在 config 对象中覆盖它)与你传递给DefinePlugin.

如何访问 webpack CLI 参数webpack.config.js

如果您希望能够mode从 CLI 或package.json脚本提供参数,并且仍然DefinePlugin没有发出警告(意味着您从 CLI 获取该值并将其插入DefinePlugin),请执行以下操作:

webpack.config.js您的module.exports = { mode: ..., rules: ... };(或export default { ... })配置中的内容更改object为 a function,如下所示。该函数的工作原理完全相同(您return是最终的配置对象),但允许从第一个参数读取环境变量env,以及从第二个参数读取 webpack CLI 选项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",而后者取代了任何发生process.env{ "NODE_ENV": "X" }这反过来可能会弄乱其他环境变量。示例:process.env.Y将成为({ "NODE_ENV": "X" }).Ywhich is undefined

此错误意味着您尝试使用与之前不同的值process.env.NODE_ENVDefinePlugin调用中重新分配

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

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

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