webpack警告-DefinePlugin中的警告'process.env.NODE_ENV'的值冲突
当我尝试运行开发模式时，我在标题中收到警告。该脚本过去在早期网站上运行良好，但现在我总是收到此警告。
这是我的 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"),
},
}),
],
};
我到处搜索，但找不到与此警告类似的任何内容。
回答
尝试改变
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 语法）
- 该
mode参数已经设置了webpack 自己的mode，即 webpack 运行时使用的模式，意思是在“构建时间”或“编译时间”，如果你愿意的话。 - 在
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。