npx webpack-dev-server, module not found

想看Stack Overflow的话：链接

webpack-dev-server

当在Terminal运行 npx webpack-dev-server的时候出现这种Error！

 Error: Cannot find module 'webpack-cli/bin/config/config-yargs'
    Require stack:
    - D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-server.js

at Object.<anonymous> (D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)

      code: 'MODULE_NOT_FOUND',
      requireStack: [
        'D:\\webpack workspace\\test5\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
      ]

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

是不是很头痛，当初我试了很多方式但是还是行不通！

现在我给大家分享一下方法：

首先我先序列一下代码部分

package.json

{
  "name": "test5",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start:dev": "webpack-dev-server",
    "dev": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                exclude: /\.(js|html|css)$/,
                loader: 'file-loader',
                //                 // options: {
                //     name:'[hash:10].[ext]'
                // }
            }
        ]

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/webpack.html'
        })
    ],
    mode: 'development',
    //devServer
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3080,
        // 自动打开浏览器
        open: true
    }

};

核心代码部分也写完了，在package.json所示安装的都是最新版本的Library

所以版本问题首先是排除！

解决方法

1.(第一种方法)

package.json里的scripts改一下

"start:dev": "webpack-dev-server",

改成

"dev": "webpack serve"

好了然后就是按原来的方法一样npm run dev

okay! Congratulations!

---

2.（第2种方法）

之前我们运行的时候是

npx webpack-dev-server来执行的

但是结果一直显示Module not found

So, 我们改一下形式就行

npx webpack serve

okay! Congratulations!

*.*有不会的地方，可以留言*.*