webpack安装

下载

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，新版的nodejs已经集成了npm，因此需要先下载 需要下载 nodejs

npm命令可以使用，打开cmd，下载一些包

但是npm下载各种包默认的服务器在国外,下载速度很慢,有时还会导致一些环境问题

因此我们可以选择从国内的服务器下载包,这要感谢淘宝团队的付出,为国内开发者提供了npm各类包的镜像

安装cnpm

下载以安装一个cnmp(淘宝镜像)来加快下载速度：

npm i -g cnpm --registry=https://registry.npm.taobao.org

C:\Users\Lenovo>npm i -g cnpm --registry=https://registry.npm.taobao.org
D:\Node\node_global\cnpm -> D:\Node\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 685 packages from 953 contributors in 49.662s

查看cnpm版本

cnpm -v

C:\Users\Lenovo>cnpm -v
cnpm@6.1.1 (D:\Node\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.4 (D:\Node\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.16.2 (D:\Node\node.exe)
npminstall@3.27.0 (D:\Node\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\Node\node_global
win32 x64 10.0.17763
registry=https://r.npm.taobao.org

安装nrm

cnpm install -g nrm
或者
npm install nrm -g

1. 查看可用的服务器列表

nrm ls

C:\Users\Lenovo>nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

2. 查看当前正在使用的服务器

nrm current

C:\Users\Lenovo>nrm current
npm

3. 切换到指定的服务器

nrm use 服务器名称

C:\Users\Lenovo>nrm use taobao

   Registry has been set to: https://registry.npm.taobao.org/

4. 测速命令

nrm test 指定的服务器名称

C:\Users\Lenovo>nrm test taobao

* taobao - 307ms

C:\Users\Lenovo>nrm test npm

  npm ---- 10674ms

通过上面的讲解,npm的最优使用方案:
安装nrm,将npm下载包的服务器设置为淘宝

npm的使用

本地安装

下载的包会放到当前项目中的node_modules文件夹中

npm install 包名
或
npm install 包名@版本号

全局安装

npm install 包名 -g 
或
npm install 包名 --global

卸载包

npm uninstall 包名

删除 全局包 比 本地包 多了个 -g

安装webpack(注意安装顺序，正确顺序请往下看)

通常使用本地安装，通过当前项目中的node_modules文件夹，查看安装的webpack

本地安装

要安装最新版本或特定版本

npm install --save-dev webpack  # 最新版

npm install --save-dev webpack@<version>  # version表示版本，需要修改为需要的版本

使用 webpack 4+ 版本，还需要安装 CLI。

npm install --save-dev webpack-cli
或
npm install webpack-cli -D

-D参数和–save-dev的作用相同，只是一种简写

全局安装

npm install --global webpack

一般不使用全局安装 webpack。这会是项目中的 webpack 版本固定，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

了解一下，以后会到的挺多的

（可能有些解释的不太对，请见谅）

i 相当于 install ， 表示 下载

un 相当于 uninstall ， 表示卸载

-D 相当于 --save-dev ， 表示 下载的是包

-g 相当于 --global ， 表示 全局下载

-S 相当于 --save ， 表示 下载的是 第三方文件

实际安装顺序

若之前操作有误，可以删除相应的包文件

1. 本地安装，利用cmd操作到达指定的文件夹下

mkdir 文件名  #在当前位置创建文件
cd 文件夹  #到该文件夹下的目录
cd ..  #返回上级目录

2. 创建 package.json 文件

npm init -y

3. 安装webpack

# 第一个安装方式默认安装最新版本
npm install --save-dev webpack
# 第二个安装方式是安装你需要的版本
npm install --save-dev webpack@<version>

4. 安装webpack-lic

npm install --save-dev webpack-cli

5. 检查webpack是否安装成功

利用cmd操作到达.bin目录,输入webpack -v 查看其版本
node_modules/.bin/webpack -v

E:\VsCode\node_modules\.bin>webpack -v
4.43.0

参考文章：

1. 学习webpack一个案例就够了https

2. webpack的安装

3. webpack 中文文档

4. 如何正确彻底删除webpack 全局或是局部？