npx webpack-dev-server, módulo no encontrado

Si desea ver Stack Overflow: enlace

webpack-dev-servidor

Cuando se ejecuta en la Terminal npx webpack-dev-servercuando esto apareceError！

 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'

¿Es un dolor de cabeza? ¡Intenté de muchas maneras pero todavía no funcionó!

Ahora les compartiré el método:

Primero, déjame secuenciar algunas 代码partes

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
    }

};

La parte del código central también se ha escrito y la última versión de la biblioteca se instala como se muestra en package.json

¡Así que primero hay que descartar el problema de la versión!

Solución

1. (El primer método)

Cambiar los scripts en package.json

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

Cambiar a

"dev": "webpack serve"

Bien, entonces sigue el método originalnpm run dev

¡bueno! ¡Felicidades!

2. (El segundo método)

Cuando corrimos antes, era

npx webpack-dev-serverEjecutar

Pero el resultado sigue mostrándoseModule not found

Entonces, solo necesitamos cambiar la forma

npx webpack serve

¡bueno! ¡Felicidades!

*. * Si no es así, puede dejar un mensaje *. *

npx webpack-dev-server, módulo no encontrado

Supongo que te gusta