Ошибка при npm start webpack?

Question

[Дмитрий]

Доброго времени суток.
Пытаюсь освоить webpack но вылетает ошибка.
На сколько понимаю проблема не в npm
Но суть ошибки не вижу.
npm run build работает, но на npm start вылетает это:

info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start'
1 verbose cli ]
2 info using npm@6.14.6
3 info using node@v12.18.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle webpack-tutorial@1.0.0~prestart: webpack-tutorial@1.0.0
6 info lifecycle webpack-tutorial@1.0.0~start: webpack-tutorial@1.0.0
7 verbose lifecycle webpack-tutorial@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle webpack-tutorial@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Admin\Desktop\Projects\webpack-tutorial\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Users\Admin\AppData\Local\Microsoft\WindowsApps;C:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Admin\AppData\Roaming\npm;C:\Users\Admin\AppData\Local\GitHubDesktop\bin
9 verbose lifecycle webpack-tutorial@1.0.0~start: CWD: C:\Users\Admin\Desktop\Projects\webpack-tutorial
10 silly lifecycle webpack-tutorial@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --mode development --open' ]
11 silly lifecycle webpack-tutorial@1.0.0~start: Returned: code: 1 signal: null
12 info lifecycle webpack-tutorial@1.0.0~start: Failed to exec start script
13 verbose stack Error: webpack-tutorial@1.0.0 start: `webpack-dev-server --mode development --open`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid webpack-tutorial@1.0.0
15 verbose cwd C:\Users\Admin\Desktop\Projects\webpack-tutorial
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.18.4
19 verbose npm v6.14.6
20 error code ELIFECYCLE
21 error errno 1
22 error webpack-tutorial@1.0.0 start: `webpack-dev-server --mode development --open`
22 error Exit status 1
23 error Failed at the webpack-tutorial@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',

  devServer: {
    contentBase: path.join(__dirname, './src'),
    port: 9000
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }

};

Comments

[Дмитрий]

Sergey Kondrashevsky, бесполезно
Все делал как написано на официальном сайте webpack

[Михаил]

Azazel1928, попробуйте пакеты переустановить

[Дмитрий]

Михаил, пробовал удалять node_modules и package-lock.json и скачивал заново.
Безрезультатно.

[Михаил]

Azazel1928, у меня при запуске этого процесса выдает

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

[Михаил]

Azazel1928, 9000 порт занят на php

вот так всё работает

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-cli": "^4.2.0"
  }
}

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',

  devServer: {
    contentBase: path.join(__dirname, './src'),
    port: 3000,
    open: true,
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
};

[Дмитрий]

Михаил, 2 дня с этим боролся! Все работает!
Спасибо большое!!!

Answer 1

[Михаил]

Конкретно в чем проблема так и не выяснил, но моего уникального скилла гугления выяснилось что нужно запускать через webpack serve
https://github.com/webpack/webpack-dev-server/issu...

Код конфига