webpack是基于nodejs开发的模块打包工具，本质上是由nodejs实现的，要想使用webpack,我们首先需要安装nodejs环境
-
进入nodejs官网，选择最新的LTS版本(稳定版)，为什么尽量用最新的版本呢，为了提升webpack打包效率
image.png - 安装好以后，可以控制台输入
node -v验证是否安装成功(如果安装成功，会打印出node版本号)
image.png - 然后再验证npm是否安装成功
npm -v(安装node的时候，npm包管理工具会一同安装)
image.png - 然后我们创建一个文件夹 ，姑且命名为
webpack-demo,创建好以后，切换到这个文件夹。然后输入命令npm init， 这个命令会帮助我们以node规范的形式创建一个node的包文件。所以，如果我们想用webpack管理项目，首先要让项目符合node的规范。当我们运行了这个命令，去初始这个项目的时候，这个项目就会符合node的规范。
这个命令会在文件夹里生成一个package.json的文件，这个文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等等
image.png
我们还可以去编辑这个package.json的文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true, // 这个新加的配置，表示我们这个项目是一个私有项目，它不会被发布到npm线上仓库里去
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
当我们项目初始化完成以后，就可以安装webpack了 ，它的安装分两种方式
- 方式1：全局安装
不推荐这种安装方式，如果有两个项目，一个是webpack3配置的，一个是webpack4配置的，如果全局安装了webpack4,那么那个webpack3的项目可能是启动不了的
//全局安装webpack的同时我们还安装了webpack的脚手架工具
npm install webpack webpack-cli -g
安装好以后，我们通过 webpack -v来打印 版本好 以确认是否安装成功
image.png
- 既然不推荐，如果已经全局安装过了，可以先删除了全局安装的 webpack和cli
npm uninstall webpack webpack-cli -g
- 方式2：项目内(局部)安装
切换到项目后，可以输入
npm install webpack webpack-cli --save-dev //或者 npm install webpack webpack-cli -D
安装后以后，项目目录下会多出 node_modules文件夹，这里放的是webpack和它依赖的一些包
image.png
-
当我们安装好以后，再通过输入 webpack -v去查看版本是行不通的。因为当我们输入这个命令后，node会尝试在全局模块的目录中去找webpack，因为我们webpack没有安装在全局,所以是找不到的。
image.png - 好在node给我们提供了一个
npx命令，我们可以通过 npx来运行webpack(npx这个命令，会帮我们在当前项目目录的node_modules文件夹里去找要执行的命令)
image.png - 如果我们安装webpack的时候，想安装具体的版本，可以这样写 ，@符号后跟具体的版本号。如果不知道要安装的版本号是否存在，可以先查一下，命令是
npm info webpack
npm install webpack@4.22.0 webpack-cli -D
//这个当我们有不同的项目，使用不同版本的webpack的时候，我们就可以通过这个方法去安装了
- 当我们把代码上传到线上仓库的时候，通常是不会把node_modules文件夹上传的，也就是说如果我们直接从远程仓库clone代码到本地，是不能运行的，这个时候我们只需要 运行
npm install去重新安装项目依赖就可以了
总结一下 三种打包方式
- 全局安装的打包方式
webpack index.js - 局部安装的打包方式
npx webpack index.js - npm scripts配置脚本
npm run bundle
- 这样配置好以后，当我们运行 npm run bundle时 跟我们配置前运行 npx webpack是一样的效果
- 这3种方式归根结底，都是在命令行执行 webpack命令
还记得我们一开始安装webpack的时候，一起安装的那个 webpack-cli这个包吗？
它的作用主要就是使我们可以在命令行里正确的运行 webpack这个命令，如果不安装这个包，我们就没有办法在命令行里正常运行 webpack或npx webpack 这样的指令
