运行npm start启动JHipster生成的前端项目出现Unknown Option错误

两个报错均为手动升级webpack到最新版本后，与JHipster默认生成的webpack配置、配套依赖版本不匹配导致：

• --inline参数报错：webpack-dev-server v4及以上版本已移除v3版本支持的--inline启动参数，该能力现已默认开启无需额外配置
• watchOptions配置报错：webpack-dev-server v4重构了配置结构，原v3版本devServer顶层的watchOptions配置项已废弃，需迁移到devMiddleware属性下，同时还可能存在其他v3专属配置的兼容问题

方案一：还原webpack版本（推荐） #

你未修改过webpack相关配置，优先还原到JHipster当前版本适配的webpack版本，避免后续出现更多兼容问题：

1. 删除项目根目录下的node_modules文件夹，以及package-lock.json或yarn.lock依赖锁文件
2. 若你之前修改了package.json中webpack、webpack-cli、webpack-dev-server的版本号，改回项目初始化时的默认版本号
3. 执行npm install重新安装所有依赖
4. 恢复之前删除了--inline参数的启动命令，用原始命令启动项目即可

方案二：适配最新版webpack配置 #

若你确实需要使用最新版webpack，按以下步骤修改配置适配webpack-dev-server v4规则：

1. 先将所有webpack配套依赖升级到对应兼容版本，执行命令：
   npm i -D webpack-cli@latest webpack-dev-server@latest
2. 打开项目webpack开发配置文件，默认路径为webpack/webpack.dev.js
3. 找到devServer配置块：

• 移除顶层的watchOptions配置，将其内容迁移到devServer.devMiddleware下，示例：

调整前：

devServer: {
  watchOptions: {
    ignored: /node_modules/
  },
  // 其他配置
}

调整后：

devServer: {
  devMiddleware: {
    watchOptions: {
      ignored: /node_modules/
    }
  },
  // 其他配置
}

4. 确认启动命令中已移除--inline参数，再启动项目即可

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