Блог

Главная - Вопросы по программированию - Webpack-dev-server не может найти модуль ‘webpack-cli/bin/config-yargs’

Webpack-dev-server не может найти модуль ‘webpack-cli/bin/config-yargs’

#reactjs #npm #webpack

#reactjs #npm #webpack

Вопрос:

Я новичок в webpack. Я пытаюсь запустить webpack-dev-server со следующим в package.json:

 "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Однако, как только я запускаю npm start , он всегда возвращает сообщение ниже:

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

Я наткнулся на решения на Github или Stackoverflow, и я последовал за ними, чтобы переустановить мой сервер разработки webpack на более низкую версию или переустановить webpack, но все еще не работает.

Ниже приведены мои зависимости от devDependencies:

 "devDependencies": {
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.5.1",
    "webpack-serve": "^3.2.0"
  }

Большое вам спасибо.

Обновить

Я следовал приведенному ниже руководству по установке webpack-dev-server: https://webpack.js.org/guides/development/#using-webpack-dev-server

Который я запускаю:

 npm install --save-dev webpack-dev-server

в vscode.

Затем я добавил ниже в файл webpack:

 devServer: {
    contentBase: './dist',
  },

Затем в package.json добавьте

 "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack --mode production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },

Затем npm start , который выдал бы ошибку ниже:

 maikerunoMacBook-Pro:hello-world michaelcheng$ npm start

> hello-world@0.1.0 start /Users/michaelcheng/Documents/proj/hello-world
> webpack serve --open

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/michaelcheng/Documents/proj/hello-world
ℹ ｢wdm｣: wait until bundle finished: /
⚠ ｢wdm｣: Hash: 1215ba9f4ef933607cb0
Version: webpack 4.44.2
Time: 2756ms
Built at: 01/19/2021 10:25:21 PM
    Asset      Size  Chunks                    Chunk Names
1.main.js  3.41 KiB       1  [emitted]         
  main.js   517 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = main.js
  [0] ./node_modules/react/index.js 190 bytes {0} [built]
  [9] ./node_modules/react-dom/index.js 1.33 KiB {0} [built]
 [46] (webpack)-dev-server/client/utils/log.js 964 bytes {0} [built]
 [60] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
 [61] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {0} [built]
 [62] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
 [64] (webpack)-dev-server/client/socket.js 1.53 KiB {0} [built]
 [67] (webpack)-dev-server/client/overlay.js 3.51 KiB {0} [built]
 [74] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {0} [built]
 [75] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {0} [built]
 [78] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {0} [built]
 [86] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {0} [built]
 [92] ./src/index.css 658 bytes {0} [built]
[103] ./node_modules/lodash/lodash.js 530 KiB {0} [built]
[104] ./src/index.js   79 modules 375 KiB {0} [built]
      | ./src/index.js 566 bytes [built]
      | ./src/App.js 397 bytes [built]
      | ./src/reportWebVitals.js 511 bytes [built]
      | ./src/HelloWorld.js 299 bytes [built]
      | ./src/signin.js 3.48 KiB [built]
      | ./node_modules/@material-ui/core/esm/Avatar/Avatar.js 6.7 KiB [built]
      | ./node_modules/@material-ui/core/esm/Button/Button.js 14.1 KiB [built]
      | ./node_modules/@material-ui/core/esm/CssBaseline/CssBaseline.js 2.52 KiB [built]
      | ./node_modules/@material-ui/core/esm/styles/useTheme.js 398 bytes [built]
      | ./node_modules/@material-ui/core/esm/TextField/TextField.js 11.4 KiB [built]
      | ./node_modules/@material-ui/core/esm/Typography/Typography.js 7.99 KiB [built]
      | ./node_modules/@material-ui/core/esm/FormControlLabel/FormControlLabel.js 5.21 KiB [built]
      | ./node_modules/@material-ui/core/esm/Checkbox/Checkbox.js 6.88 KiB [built]
      | ./node_modules/@material-ui/core/esm/Link/Link.js 5.04 KiB [built]
      | ./node_modules/@material-ui/core/esm/Grid/Grid.js 13.2 KiB [built]
      |       65 hidden modules
      160 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.js (517 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (517 KiB)
      main.js

ℹ ｢wdm｣: Compiled with warnings.
^C
maikerunoMacBook-Pro:hello-world michaelcheng$ npm start

> hello-world@0.1.0 start /Users/michaelcheng/Documents/proj/hello-world
> webpack-dev-server

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/michaelcheng/Documents/proj/hello-world/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/michaelcheng/Documents/proj/hello-world/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/michaelcheng/Documents/proj/hello-world/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-world@0.1.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hello-world@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/michaelcheng/.npm/_logs/2021-01-19T13_25_44_633Z-debug.log

Ответ №1:

Согласно документации webpack / webpack-dev-server, которую вы должны запустить webpack serve вместо webpack-dev-server .

Попробуйте заменить в вашем package.json:

   "scripts": {
    "start": "webpack serve",
    // ...

Затем запустите npm start снова.

Метки: