执行npm run dev时遇Webpack错误：未知选项'--env.mode=dev'求解决

原因分析 #

这个错误通常是webpack-cli版本差异导致的参数格式不兼容，或是package.json里的scripts命令写法不符合当前webpack-cli的解析规则——不同版本的webpack-cli对--env参数的处理逻辑不同，旧版本不支持--env.mode=dev这种直接赋值的写法。

解决方案 #

1. 修正package.json中的scripts命令 #

打开项目根目录的package.json，找到scripts下的dev命令，按webpack-cli版本调整写法：

• 若使用webpack-cli 4+，需将参数格式改为空格分隔：

  "scripts": {
    "dev": "webpack serve --env mode=dev"
  }
  

  把--env.mode=dev改成--env mode=dev，用空格替代点连接符。
• 若使用webpack-cli 3及以下版本，直接用--mode指定环境即可：

  "scripts": {
    "dev": "webpack --mode development"
  }
  

2. 检查并匹配webpack-cli版本 #

执行命令查看当前安装的webpack-cli版本：

npm list webpack-cli

根据项目需求升级或降级版本：

• 升级到最新版：

  npm install webpack-cli@latest --save-dev
  

• 降级到3.x版本（适配旧项目配置）：

  npm install webpack-cli@3 --save-dev
  

3. 同步webpack配置文件的env处理逻辑 #

如果webpack.config.js依赖env参数，确保写法符合对应版本规范。比如webpack 4+中，配置文件可写成函数形式接收env：

module.exports = (env) => {
  const currentMode = env.mode || 'development';
  return {
    mode: currentMode,
    // 其他配置项...
  }
};

内容的提问来源于stack exchange，提问作者Adi