最近自己着手做一个小的Demo需要webpack，目前版本号是4.41.2，想使用的版本是3.6.0，因3x版本和4x版本很多地方不同，所以在安装过程中也是很多坎坷，下面是遇到的一些坑，和一些解决办法
1.操作步骤：首先全局安装npm install -g webpack，再webpack -v查看版本号报错
解释报错信息：报错信息的意思是需要我安装 webpack-cli，问我是否需要安装，我选择yes，但提示并没有发现 模板webpack-cli
解决办法：全局安装 npm install -g webpack-cli
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install ‘webpack-cli‘ (yes/no): yes
Installing ‘webpack-cli‘ (running ‘npm install -D webpack-cli‘)...
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
updated 1 package and audited 5285 packages in 13.683s
found 0 vulnerabilities
Error: Cannot find module ‘webpack-cli‘
Require stack:
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:143:5
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
code: ‘MODULE_NOT_FOUND‘,
requireStack: [
‘C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\webpack\\bin\\webpack.js‘
]
}
2.操作步骤：本地安装npm install [email protected] --save-dev
报错原因：因全局安装webpack版本4.41.2，全局版本与本地版本不一致，导致运行错误
报错提示：webpack中 presetToOptions 报错
解决办法：
- 根据路径D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js找到报错信息处，将
const statsPresetToOptions = require("webpack").Stats.presetToOptions; 进行删除 //不推荐此方法，尽量我们不要去改源码 - 可将webpack-cli删除，因webpack3x版本不依赖与webpack-cli，可手动配置信息，webpack4x很多内部已经配置完成，依赖的是webpack-cli //该方法还需进一步测试，不确定是否是该问题
- 可将全局安装的webpack版本4.41.2删除，再次全局安装3.6.0版本即可 // 因项目不同，webpack的版本也会不同，全局安装webpack不是好的推荐方法，大家在做一些Demo中可使用，不推荐项目中使用
- 前端框架安装vue，react，angular时都会自动安装webpack，比如vuecli2使用的事webpack3x，vuecli3使用的是webpack4，大家可以根据自己选择的框架进行选择webpack版本 // 推荐
const statsPresetToOptions = require("webpack").Stats.presetToOptions;
^
TypeError: Cannot read property ‘presetToOptions‘ of undefined
at processOptions (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:137:57)
at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:364:3
at Object.parse (D:\web\Demo\webpack-demo\node_modules\yargs\yargs.js:567:18)
at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at module.exports (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\import-local\index.js:16:66)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:15:6
at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
at internal/main/run_main_module.js:17:11
3.操作步骤：npm uninstall -g webpack 卸载全局webpack
解决办法：全局安装npm install -g webpack
问题总结：webpack不推荐全局安装，可在项目中本地安装
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js‘
?[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:687:27)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m {
code: ?[32m‘MODULE_NOT_FOUND‘?[39m,
requireStack: []
}
原文地址：https://www.cnblogs.com/gqx-html/p/12028399.html
时间： 2024-10-05 04:56:19