webpack的安装
npm的配置文件
你创建一个项目文件夹，一般源文件都写在项目文件夹的src下，而这个项目的配置文件是在项目文件夹下的package.json的
这个配置文件会记录项目的名称，版本号，项目描述等
也会记录着项目所依赖的其他库的信息和依赖库的版本号
我们怎么创建这个配置文件呢？
可以这样：
npm init然后会弹出一些选项，进行设置就好了
不是所有的项目都要这样干的，针对Vue给我们提供了脚手架：Vue CLI
当用脚手架创建项目的时候会自动生成package.json
常见的配置文件
如果用npm init -y就是所有信息使用默认的
通过脚手架创建的项目的配置文件长这样：
常见的属性
有一些常见的属性
必须填写的是项目名称（name）和版本号（version）
description是描述信息，很多时候是作为项目的基本描述
author是作者相关信息（发布时候用）
license是开源协议（发布时用）
还有private属性：
private属性记录当前的项目是否是私有的
当值为true时，npm是不能发布它的，这是防止私有项目或者模块发布出去的方式
main属性：
设置程序的入口，比如使用axios模块 const axios = require('axios');
如果有main属性，实际上是找到对应的main属性来查找文件的
scripts属性：
scripts属性用于配置一些脚本命令，以键值对的形式存在
配置后我们可以通过npm run命令的key来执行这个命令（相当于给原本运行的命令起别名）
npm start和npm run start的区别是什么？
等价
对于常用的start、test、stop、restart可以省略掉run直接通过npm start等方式运行
dependencies属性
dependencies属性是指无论开发环境还是生成环境都需要依赖的包
通常是项目开发需要用到的一些库模块vue、vuex、react、react-dom、axios等
与之对应的是devDependencies
devDependencies属性
一些包在生成环境是不需要的，比如webpack，babel等
这时候我们会通过npm install webpack --save-dev将它安装到devDependencies属性中
peerDependencies属性
还有一种项目依赖关系是对等依赖，也就是依赖的一个包必须是以另外一个宿主包为前提的
element-plus是依赖于vue3的，ant design是依赖于react、react-dom
依赖的版本管理
安装的依赖版本会出现：^2.0.3或者~2.0.3
这是何意呢？
npm的包通常需要遵循semver版本规范：
semver：https://semver.org/lang/zh-CN/
npm semver:https://docs.npmjs.com/misc/semver
什么是semver版本规范？
semver版本规范：X.Y.Z
X主版本号：当你做了不兼容的API修改（可能不兼容之前的版本）
Y次版本号：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
Z修订号：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）
那^和~是什么意思呢？
你写x.y.z表示一个明确的版本号
^x.y.z表示x不变，y和z永远安装最新的版本
~x.y.z表示x和y保持不变，z永远安装最新的版本
常见属性
engines属性
engines属性用于指定Node和NPM的版本号
在安装的过程中，会先检查对应的引擎版本，不符合就报错
也可以指定所在的操作系统（很少用）
webpack的安装
npm install webpack如此安装webpack
还需要安装一个额外的东西，要不然webpack很多命令执行不了：
npm install -D webpack-cli可以这样查看安装的webpack版本：
webpack --version使用-g可以全局安装
要全局安装的一般都是工具包（随时可能敲它的命令）
项目安装
项目安装会在当前目录下生成一个node_modules文件夹
局部安装分为开发时依赖和生产时依赖
默认安装开发和生产依赖：
npm install axios
npm i axios开发依赖：
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D根据package.json中的依赖包：
npm install