webpack 安装及一些坑

末蓝、 2024-04-06 13:36 92阅读 0赞

![3e7c7d20f06f4397ad2f980e5ddc24c1.png][]

1.操作步骤：首先全局安装npm install -g webpack，再webpack -v查看版本号报错

解释报错信息：报错信息的意思是需要我安装 webpack-cli，问我是否需要安装，我选择yes，但提示并没有发现 模板webpack-cli

解决办法：全局安装 npm install -g webpack-cli

2.操作步骤：本地安装npm install webpack@3.6.0 --save-dev

报错原因：因全局安装webpack版本4.41.2，全局版本与本地版本不一致，导致运行错误

报错提示：webpack中 presetToOptions 报错

解决办法：

* 根据路径D:\\web\\Demo\\webpack-demo\\node\_modules\\webpack-cli\\bin\\cli.js找到报错信息处，将
 
 <table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>const</code>&nbsp;<code>statsPresetToOptions = require(</code><code>"webpack"</code><code>).Stats.presetToOptions; 进行删除&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//不推荐此方法，尽量我们不要去改源码</code> </td> 
 </tr> 
 </tbody> 
 </table>
 * 可将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版本 // 推荐

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </td> 
 <td> <code>const</code>&nbsp;<code>statsPresetToOptions = require(</code><code>"webpack"</code><code>).Stats.presetToOptions;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>^</code> <code>TypeError: Cannot read property&nbsp;</code><code>'presetToOptions'</code>&nbsp;<code>of undefined</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at processOptions (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:137:57)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:364:3</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.parse (D:\web\Demo\webpack-demo\node_modules\yargs\yargs.js:567:18)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.&lt;anonymous&gt; (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:366:3)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module._compile (</code><code>internal</code><code>/modules/cjs/loader.js:956:30)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.Module._extensions..js (</code><code>internal</code><code>/modules/cjs/loader.js:973:10)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module.load (</code><code>internal</code><code>/modules/cjs/loader.js:812:32)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Function.Module._load (</code><code>internal</code><code>/modules/cjs/loader.js:724:14)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module.require (</code><code>internal</code><code>/modules/cjs/loader.js:849:19)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at require (</code><code>internal</code><code>/modules/cjs/helpers.js:74:18)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at module.exports (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\import-local\index.js:16:66)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:15:6</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.&lt;anonymous&gt; (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:366:3)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module._compile (</code><code>internal</code><code>/modules/cjs/loader.js:956:30)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.Module._extensions..js (</code><code>internal</code><code>/modules/cjs/loader.js:973:10)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module.load (</code><code>internal</code><code>/modules/cjs/loader.js:812:32)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Function.Module._load (</code><code>internal</code><code>/modules/cjs/loader.js:724:14)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module.require (</code><code>internal</code><code>/modules/cjs/loader.js:849:19)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at require (</code><code>internal</code><code>/modules/cjs/helpers.js:74:18)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.&lt;anonymous&gt; (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:156:2)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module._compile (</code><code>internal</code><code>/modules/cjs/loader.js:956:30)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Object.Module._extensions..js (</code><code>internal</code><code>/modules/cjs/loader.js:973:10)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Module.load (</code><code>internal</code><code>/modules/cjs/loader.js:812:32)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Function.Module._load (</code><code>internal</code><code>/modules/cjs/loader.js:724:14)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at Function.Module.runMain (</code><code>internal</code><code>/modules/cjs/loader.js:1025:10)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>at&nbsp;</code><code>internal</code><code>/main/run_main_module.js:17:11</code> </td> 
 </tr> 
 </tbody> 
</table>

3.操作步骤：npm uninstall -g webpack 卸载全局webpack

解决办法：全局安装npm install -g webpack

问题总结：webpack不推荐全局安装，可在项目中本地安装

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>internal</code><code>/modules/cjs/loader.js:797</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>throw</code>&nbsp;<code>err;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>^</code> <code>Error: Cannot find module&nbsp;</code><code>'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js'</code> <code>?[90m&nbsp;&nbsp;&nbsp; at Function.Module._resolveFilename (</code><code>internal</code><code>/modules/cjs/loader.js:794:15)?[39m</code> <code>?[90m&nbsp;&nbsp;&nbsp; at Function.Module._load (</code><code>internal</code><code>/modules/cjs/loader.js:687:27)?[39m</code> <code>?[90m&nbsp;&nbsp;&nbsp; at Function.Module.runMain (</code><code>internal</code><code>/modules/cjs/loader.js:1025:10)?[39m</code> <code>?[90m&nbsp;&nbsp;&nbsp; at&nbsp;</code><code>internal</code><code>/main/run_main_module.js:17:11?[39m { </code> <code>&nbsp;&nbsp;</code><code>code: ?[32m</code><code>'MODULE_NOT_FOUND'</code><code>?[39m,</code> <code>&nbsp;&nbsp;</code><code>requireStack: []</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

4.：操作步骤：安装了webpack3x，想实现热更新需要安装 `npm install webpack-dev-server --save-dev后，npm run dev运行`

报错提示：未找到webpack模块

解决办法：webpack-dev-server降低版本或webpack升级版本

1. 删除webpack低版本，安装最新版本webpack

2. 删除webpack-dev-server最新版本，降低webpack版本 npm install webpack-dev-server@webpack-3 --save-dev

问题总结：因webpack-dev-server未指定版本，所以安装的是最新版本，因webpack版本是3.x，所以导致webpack版本与webpack-dev-server版本并不匹配，

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>Error: Cannot find module&nbsp;</code><code>'webpack'</code> </td> 
 </tr> 
 </tbody> 
</table>

![5b2e8c9378d34e0981d2654c84b8915d.png][]

[3e7c7d20f06f4397ad2f980e5ddc24c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4ecd37f6d14c46f0a8818a8d35498a2b.png
[5b2e8c9378d34e0981d2654c84b8915d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1aa4a87803cb4484939edf11f59c0455.png