如何解决npm错误"npm ERR！code ELIFECYCLE"

Question

我正在努力学习webpackhttps://www.youtube.com/watch?v=TzdEpgONurw，视频使用的是webpack 4，但我使用的是web pack 5，当我下载webpack dev server和npm启动时，它没有工作，我认为这不是版本的问题，因为我没有完全遵循视频，这是我的调试日志：

0 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.8
3 info using node@v12.19.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle tut@1.0.0~prestart: tut@1.0.0
6 info lifecycle tut@1.0.0~start: tut@1.0.0
7 verbose lifecycle tut@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle tut@1.0.0~start: PATH: C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecyclenode-gyp-bin;C:UsersWalterDesktoptutnode_modules.bin;C:Python38Scripts;C:Python38;C:Program FilesCommon FilesMicrosoft SharedWindows Live;C:Program Files (x86)Common FilesMicrosoft SharedWindows Live;C:WINDOWSsystem32;C:WINDOWS;C:WINDOWSSystem32Wbem;C:WINDOWSSystem32WindowsPowerShellv1.0;C:Program Files (x86)Windows LiveShared;C:WINDOWSSystem32OpenSSH;C:ProgramDatachocolateybin;C:Program Filesnodejs;C:Program FilesGitcmd;C:UsersWalterAppDataRoamingActiveStatebin;C:Program Files (x86)ActiveState Komodo IDE 12;C:UsersWalterAppDataLocalProgramsMicrosoft VS Codebin;C:UsersWalterAppDataRoamingnpm
9 verbose lifecycle tut@1.0.0~start: CWD: C:UsersWalterDesktoptut
10 silly lifecycle tut@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --open' ]
11 silly lifecycle tut@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle tut@1.0.0~start: Failed to exec start script
13 verbose stack Error: tut@1.0.0 start: `webpack-dev-server --open`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecycleindex.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecyclelibspawn.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 tut@1.0.0
15 verbose cwd C:UsersWalterDesktoptut
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.19.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error tut@1.0.0 start: `webpack-dev-server --open`
22 error Exit status 1
23 error Failed at the tut@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 ]

这是我的包.json:

{
"name": "tut",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"http-server": "^0.12.3"
}
}

这是webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /.html$/i,
loader: 'html-loader',
options:{minimize:true}
},
],
},
devServer:{
contentBase:'./dist',
},
plugins: [new HtmlWebpackPlugin({
template:"./src/index.html",
filename:"./index.html"
}),
]
};

Answer 1

尝试将package.json中的start脚本更改为webpack serve，如下所示：

"scripts": {
"build": "webpack",
"start": "webpack serve"
}

要启用HMR，请尝试在webpack.config.js中更新devServer对象，如下所示：

devServer: {
contentBase: './dist',
hot: true, // <---- add this line
},