如何修复Error: Cannot find module 'webpack-cli/bin/config-yargs'错误？

我仔细看了你的配置和报错信息，这个问题本质是版本兼容性冲突——你用的webpack-dev-server@3.11.0和webpack-cli@4.1.0不兼容，webpack-cli 4.x移除了旧版dev-server依赖的webpack-cli/bin/config-yargs模块，所以才会抛出这个找不到模块的错误。下面给你两种靠谱的修复方案：

你的问题背景整理 #

你已经尝试过多种网络方案但无效，当前项目配置和报错详情如下：

package.json配置 #

{ 
  "name": "js_class", 
  "version": "1.0.0", 
  "description": "", 
  "main": "main.js", 
  "scripts": { 
    "build": "webpack --config webpack.config.js", 
    "webpack-dev-server": "webpack-dev-server", 
    "dev": "webpack-dev-server --mode=development", 
    "prod": "webpack --mode=production" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "@babel/core": "^7.12.3", 
    "@babel/preset-env": "^7.12.1", 
    "babel-loader": "^8.1.0", 
    "html-webpack-plugin": "^4.5.0", 
    "path": "^0.12.7", 
    "webpack": "^5.3.2", 
    "webpack-cli": "^4.1.0", 
    "webpack-dev-server": "^3.11.0" 
  } 
}

webpack.config.js配置 #

const HtmlWebPackPlugin = require('html-webpack-plugin'); 
const path = require('path'); 

module.exports = { 
  entry: './index.js', 
  output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
  }, 
  mode: 'development', 
  module: { 
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /(node_modules)/, 
        use: { 
          loader: 'babel-loader', 
          options: { 
            presets: ['@babel/preset-env'] 
          } 
        } 
      } 
    ] 
  }, 
  devServer: { 
    contentBase: path.join(__dirname, 'dist'), 
    compress: true, 
    port: 9000 
  }, 
  plugins: [ 
    new HtmlWebPackPlugin() 
  ] 
};

完整报错信息 #

internal/modules/cjs/loader.js:834 throw err; ^ 
Error: Cannot find module 'webpack-cli/bin/config-yargs' 
Require stack: 
- D:\Programiranje\Code\js\js_class\node_modules\webpack-dev-server\bin\webpack-dev-server.js 
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15) 
at Function.Module._load (internal/modules/cjs/loader.js:687:27) 
at Module.require (internal/modules/cjs/loader.js:903:19) 
at require (internal/modules/cjs/helpers.js:74:18) 
at Object.<anonymous> (D:\Programiranje\Code\js\js_class\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 
at Module._compile (internal/modules/cjs/loader.js:1015:30) 
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10) 
at Module.load (internal/modules/cjs/loader.js:879:32) 
at Function.Module._load (internal/modules/cjs/loader.js:724:14) 
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) { 
code: 'MODULE_NOT_FOUND', 
requireStack: [ 'D:\Programiranje\Code\js\js_class\node_modules\webpack-dev-server\bin\webpack-dev-server.js' ] 
} 

两种有效修复方案 #

方案一：降级webpack-cli到兼容版本 #

这个方案不需要改动太多配置，适合不想调整devServer设置的情况：

1. 先卸载当前的webpack-cli：

npm uninstall webpack-cli

2. 安装和webpack-dev-server 3.11.0兼容的webpack-cli 3.x版本（比如3.3.12，这是经过验证的稳定版本）：

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

3. 删掉node_modules和package-lock.json，重新执行npm install确保依赖干净，然后运行npm run dev就能正常启动了。

方案二：升级webpack-dev-server到适配webpack-cli 4.x的版本 #

如果你想使用最新的工具版本，可以选择这个方案，但需要调整部分配置：

1. 卸载当前的webpack-dev-server：

npm uninstall webpack-dev-server

2. 安装webpack-dev-server 4.x版本（和你的webpack 5.x兼容）：

npm install webpack-dev-server@4 --save-dev

3. 修改package.json里的scripts命令，因为webpack-dev-server 4.x的启动命令从webpack-dev-server改成了webpack serve：

"scripts": {
  "build": "webpack --config webpack.config.js",
  "dev": "webpack serve --mode=development",
  "prod": "webpack --mode=production"
}

4. 调整webpack.config.js里的devServer配置，因为4.x版本把contentBase替换成了static：

devServer: {
  static: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000
}

5. 同样删掉node_modules和package-lock.json，重新npm install后运行npm run dev即可。

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