第一次安装webpack过程中的那些坑

1.window+R键，输入cmd打开命令行工具，输入 mkdir XXXX（XX：文件夹名）；

2.cd XXX 进入刚刚创建好的文件夹里，输入cnpm install -g webpack （安装了淘宝镜像的小伙伴可以直接使用cnpm，没有安装的使用npm）cnpm和npm的区别这里就不多说了，不懂的小伙伴可以百度

安装前必须先安装node.js

1. 安装了淘宝npm镜像，后面也是使用cnpm安装的，建议安装下

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装成功后，cmd内输入webpack -v，查看版本号，出现webpack的版本，就说明安装成功

如果运行报错：

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN saveError ENOENT: no such file or directory, open 'D:\webpack\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\webpack\package.json'
npm WARN @webpack-cli/configtest@1.0.1 requires a peer of webpack@4.x.x || 5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@4.5.0 requires a peer of webpack@4.x.x || 5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack No description
npm WARN webpack No repository field.
npm WARN webpack No README data
npm WARN webpack No license field.

+ webpack-cli@4.5.0
updated 1 package in 0.777s

6 packages are looking for funding
  run `npm fund` for details

Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- C:\Users\saoli\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.resolve (internal/modules/cjs/helpers.js:83:19)
    at runCli (C:\Users\saoli\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:50:26)
    at C:\Users\saoli\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:139:5
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\saoli\\AppData\\Roaming\\npm\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

出现以上错误，就是提示你还要安装webpack-cli
解决方法：
卸载局部或者全局

npm uninstall webpack-dev-server -g 卸载全局

npm uninstall webpack-dev-server -D 卸载局部(本地)

安装指定版本

 npm install -g webpack@5.21.2

然后在安装

cnpm install webpack-cli -g

cmd内输入webpack -v，查看版本号，出现webpack的版本，就说明安装成功