Error starting webpack?

Question

webpack

Using webpack when creating landingpage
webpack.config.js

const path = require('path')

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '.dist'),
        publicPath: './dist'
    },
    devServer: {
        overlay: true
    }
}

package.json

{
  "name": "mercedes-benz",
  "version": "1.0.0",
  "description": "test-task",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "[email protected]",
  "license": "MIT",
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

yarn run build worked and everything was assembled
yarn ren dev error

$ yarn run dev
yarn run v1.22.5
$ webpack-dev-server --open --mode development
internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'    
Require stack:
- D:\[My]Project\Mercedes-Benz\node_modules\webpack-dev-serv
er\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cj
s/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js
:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:1
9)
    at require (internal/modules/cjs/helpers.js:77:18)      
    at Object.<anonymous> (D:\[My]Project\Mercedes-Benz\node
_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 
    at Module._compile (internal/modules/cjs/loader.js:1156:
30)
    at Object.Module._extensions..js (internal/modules/cjs/l
oader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32) 
    at Function.Module._load (internal/modules/cjs/loader.js
:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal
/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\[My]Project\\Mercedes-Benz\\node_modules\\webpack-d
ev-server\\bin\\webpack-dev-server.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documenta
tion about this command.

what is the problem?

Answer 1

Hello
, I also had this problem, as a result I solved it in this way:
webpack.config.js

...
  devServer: {
    overlay: true,
    open: true
  }
...

package.json

...
"scripts": {
    "dev": "webpack serve",
    ...
  }
...

Answer 2

Webpack 5 now calls "webpack serve" instead of "webpack-dev-server" in the console. This was the whole mistake.