Question

我正在尝试使用webpack和babel学习现代js。我是这个东西的初学者。讲师通过创建一个名为forkify的应用程序（食谱应用程序）来教授现代js。我正在尝试使其工作。但是在运行npm后安装webpack cli，然后再运行npm run dev，然后运行npm run build ..一切工作到现在为止。.但是在运行npm run start之后，它显示此错误。有人可以帮我解决这个问题吗？ / p>

user@Users-MacBook-Pro forkify % npm run start                      
> forkify@1.0.0 start /Users/user/Desktop/forkify
> webpack-dev-server --mode development --open

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/user/Desktop/forkify/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/user/Desktop/forkify/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/user/Desktop/forkify/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! forkify@1.0.0 start: `webpack-dev-server --mode development --open`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the forkify@1.0.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/user/.npm/_logs/2020-10-22T09_59_47_518Z-debug.log
user@Users-MacBook-Pro forkify %

这是我的json包：

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "bhat shakran",
  "license": "ISC",
  "devDependencies": {
    "live-server": "^1.2.1",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
  
}

还有我的日志文件：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'start' ]
2 info using npm@6.14.8
3 info using node@v12.19.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle forkify@1.0.0~prestart: forkify@1.0.0
6 info lifecycle forkify@1.0.0~start: forkify@1.0.0
7 verbose lifecycle forkify@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle forkify@1.0.0~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/user/Desktop/forkify/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Library/Apple/bin
9 verbose lifecycle forkify@1.0.0~start: CWD: /Users/user/Desktop/forkify
10 silly lifecycle forkify@1.0.0~start: Args: [ '-c', 'webpack-dev-server --mode development --open' ]
11 silly lifecycle forkify@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle forkify@1.0.0~start: Failed to exec start script
13 verbose stack Error: forkify@1.0.0 start: `webpack-dev-server --mode development --open`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314: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 forkify@1.0.0
15 verbose cwd /Users/user/Desktop/forkify
16 verbose Darwin 19.0.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
18 verbose node v12.19.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error forkify@1.0.0 start: `webpack-dev-server --mode development --open`
22 error Exit status 1
23 error Failed at the forkify@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 ]

Answer 1

这是一个outstanding issue和webpack-dev-server。要解决此问题，请使用webpack-cli的先前主要版本：

npm install --save-dev webpack-cli@^3

您要npm做的是安装webpack-cli，但只能使用满足3.X.X格式的最新版本。访问Semantic Versioning了解更多信息。

除非您的教程明确要求提供Webpack版本5，否则您可能要使用v4。 v5仅在几周前发布，许多教程尚未更新。按照上述步骤安装v4：

npm install --save-dev webpack@^4

在安装我的开发工具时遇到问题（Webpack）

1 个答案: