升级Webpack5与Node18后执行脚本报错：未知选项‘--env.development’

报错信息 #

[webpack-cli] Error: Unknown option '--env.development'
[webpack-cli] Run 'webpack --help' to see available commands and options

你的package.json相关配置 #

"scripts": {
    "start": "webpack-dev-server --env.development",
    "watch": "webpack --watch",
    "build-production": "webpack --env.production --env.NODE_ENV=production ",
    "build-staging": "webpack --env.production --env.NODE_ENV=staging ",
    "build-development": "webpack --env.production --env.NODE_ENV=development ",
    "test": "jest --maxWorkers=4 --logHeapUsage",
    "lint:report": "eslint -f checkstyle -o ./eslint_report/report.xml --ext .js,.vue .",
    "lint:fix": "eslint --ext .js,.vue --fix .",
    "lint": "eslint . --ext .js,.vue",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
 "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"

问题原因 #

Webpack 5配套的webpack-cli 4.x版本废弃了Webpack 4时代的--env.xxx布尔值参数简写语法。原写法--env.development是直接传递一个名为development的布尔env变量，但webpack-cli 4+不再识别这种点分隔的参数格式，必须改用标准的参数传递形式。

修复方案 #

修改package.json里的scripts，把所有--env.xxx格式改成--env xxx（空格分隔）或者--env=xxx（等号分隔）的形式，同时--env.NODE_ENV=xxx要调整为--env NODE_ENV=xxx：

修改后的scripts示例：

"scripts": {
    "start": "webpack-dev-server --env development",
    "watch": "webpack --watch",
    "build-production": "webpack --env production --env NODE_ENV=production ",
    "build-staging": "webpack --env production --env NODE_ENV=staging ",
    "build-development": "webpack --env production --env NODE_ENV=development ",
    "test": "jest --maxWorkers=4 --logHeapUsage",
    "lint:report": "eslint -f checkstyle -o ./eslint_report/report.xml --ext .js,.vue .",
    "lint:fix": "eslint --ext .js,.vue --fix .",
    "lint": "eslint . --ext .js,.vue",
    "format": "prettier -w .",
    "prepare": "husky install"
  }

注意：Webpack配置文件中通过env.development判断环境的逻辑无需修改，仅需调整命令行传递参数的格式即可。

内容的提问来源于stack exchange，提问作者Pavan Kalyan Payyavula