webpack-dev-server插件兼容问题：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

在webpack中使用webpack-dev-server插件，遇到的问题：Error: Cannot find module 'webpack-cli/bin/config-yargs'

 

问题解决参考： Error: Cannot find module 'webpack-cli/bin/config-yargs' #1948

If you upgrade webpack to 5. *, and webpack cli to 4. *, an error will be reported:

Error: Cannot find module 'webpack-cli/bin/config-yargs'

Temporary solution: Back off webpack cli to version 3. * for example:

"webpack-cli": "^ 3.3.12"

如果你webpack版本升级到了5.x；那么webpack-cli必须使用@3.3.12这个版本。

　解决：

1. 卸载当前的webpack-cli插件： npm uninstall webpack-cli -D

2. 安装 webpack-cli 3.x版本 npm install webpack-cli@3.3.12 -D

package.json中最终配置：

"devDependencies": {
        //省略其他配置
        "webpack": "^5.6.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }

补充：若要与html-webpack-plugin插件兼容，可将webpack版本降低到@4.44.0，

参考配置如下：

"devDependencies": {    
        //省略其他配置
        "vue": "^2.6.12",
        "vue-loader": "^15.9.5",
        "webpack": "^4.44.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
}