webpack 安装及一些坑

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 webpack-demo@1.0.0 No description

npm WARN webpack-demo@1.0.0 No repository field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.3.10

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 webpack@3.6.0 --save-dev

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

报错提示：webpack中 presetToOptions 报错

解决办法：

根据路径D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js找到报错信息处，将

1

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. (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. (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. (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: []

}

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版本并不匹配，

1	`Error: Cannot find module` `'webpack'`

相关阅读:
计算机竞赛机器视觉 opencv 深度学习驾驶人脸疲劳检测系统 -python
聊聊秒杀系统的设计（三）
docker学习学记
 Java多并发（四）| 锁（Lock接口 & AQS & ReentrantLock）
LeetCode-day14-521. 最长特殊序列 Ⅰ
ZCMU--1379: The Black Hole of Numbers(C语言)
【前端设计模式】之解释器模式
 FCP第二题：数据库中有一张地区数据统计表，但是并不规则
 输出与输出
 06-nginx反向代理实战
原文地址：https://blog.csdn.net/weixin_51225684/article/details/127070102

webpack 安装 及 一些坑

webpack 安装及一些坑