记录npx webpack-dev-server运行报错-一一网

背景：今天休息无聊想用webpack搭个开发环境随便玩玩。

发现报错时项目进度：

webpack 配置文件

 ```
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: './src/app.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
   },

   devtool:'source-map',

   plugins: [
     new HtmlWebpackPlugin({
       template:path.join(__dirname, './public/index.html') , 
       filename:'index.html',
       inject:true
     }),
     new CopyPlugin({
       patterns: [
         { from: path.join(__dirname, './public/favicon.ico'), to: path.join(__dirname, './dist') }
       ]
     }),
   ],

   devServer: {
     contentBase: path.join(__dirname, './dist'),
     compress: true,
     port: 8080
   }
 ```
复制代码

  package.json依赖包版本
 
 ```
 "devDependencies": {
     "copy-webpack-plugin": "^6.0.0",
     "html-webpack-plugin": "^4.5.2",
     "webpack-dev-server": "^3.11.2",
     "webpack": "^4.46.0",
     "webpack-cli": "4.6.0"
   }
 ```
复制代码

OK，看下再当前进度下运行`npx webpack-dev-server`命令的报错信息吧

  ```
  internal/modules/cjs/loader.js:896
    throw err;
    ^

  Error: Cannot find module 'webpack-cli/bin/config-yargs'
  Require stack:
  - F:\phpStudy\PHPTutorial\WWW\nodejs\0-lagou-admin\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js      
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
      at Function.Module._load (internal/modules/cjs/loader.js:743:27)
      at Module.require (internal/modules/cjs/loader.js:965:19)
      at require (internal/modules/cjs/helpers.js:88:18)
      at Object.<anonymous> (F:\phpStudy\PHPTutorial\WWW\nodejs\0-lagou-admin\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
      at Module._compile (internal/modules/cjs/loader.js:1076:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
      at Module.load (internal/modules/cjs/loader.js:941:32)
      at Function.Module._load (internal/modules/cjs/loader.js:782:14)
      at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      'F:\\phpStudy\\PHPTutorial\\WWW\\nodejs\\0-lagou-admin\\frontend\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
    ]
  }
  ```
复制代码

报错信息如上，开始分析原因：操作和以前一样刚开始最简单的几步，第一反应是依赖包版本变化带来的bug，注意错误信息Cannot find module 'webpack-cli/bin/config-yargs'，并指向文件node_modules\webpack-dev-server\bin\webpack-dev-server.js，那就去这个文件看个究竟吧！果然，在55行有一行注释