Babel.js webpack警告-定义插件时出现警告“process.env.NODE_ENV”的值冲突

46scxncf  于 2022-12-08  发布在  Babel
关注(0)|答案(5)|浏览(323)

当我尝试运行开发模式时,我在标题中得到警告。这个脚本以前在早期的网站上工作得很好,但现在我总是得到这个警告。
这是我的包裹

{
  "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"),
      },
    }),
  ],
};

我找遍了所有地方,都没有找到类似的警告。

6yoyoihd

6yoyoihd1#

尝试更改

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

9lowa7mx2#

你说你“试着运行开发模式”。根据你的package.json,这意味着运行:
webpack --mode development --watch(注:v4语法)

  1. mode parameter是Webpack运行时使用的模式,即在“* 构建时 *”(或“编译时”)。
    1.当您尝试为“run time”(不同于“build time”)定义该变量时,DefinePlugin会检查该变量,如果两者不同,则会发出警告(此处为代码)。

溶液

确保webpack.config对象中的mode(或CLI命令中的mode,该命令覆盖config对象中的mode)与传递给DefinePluginmode相同。

如何在webpack.config.js中访问Webpack CLI参数?

如果您希望能够从CLI或package.json脚本提供mode参数,并且仍然让DefinePlugin不给予警告(意味着您从CLI获取该值并将其插入DefinePlugin),请执行以下操作:
module.exports = { mode: ..., rules: ... };更改webpack.config.js的内容(或export default { ... })将object配置为function,如下所示。(你的return是最终的config对象),但允许从第一个参数env阅读环境变量,以及来自第二个参数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" }).Y,即undefined

nr7wwzry

nr7wwzry3#

感谢大家的帮助,非常感谢!
最后,我在webpack.config的以下代码段中用“development”替换了“production”:

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

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

lawou6xi

lawou6xi4#

此错误表示您尝试在DefinePlugin呼叫中重新指派process.env.NODE_ENV,而指派的值与之前的值不同。
您可以通过在config中添加mode选项或在optimization中添加nodeEnv键来隐式设置它,或者在运行webpack之前设置环境变量。
看起来这就是你的情况。你在某个地方设置了NODE_ENV=development,运行了webpack,然后你试图将它重新分配给production
检查你如何运行webpack和NODE_ENV环境值。

bmp9r5qi

bmp9r5qi5#

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")

相关问题