webpack是一个前端模块化开发的工具，简单地说就是用来打包源代码的。所谓源代码，不仅仅是js代码，还包括了css代码，图片等等。
引用东哥经典语录来解释为什么使用webpack打包，这样的好处：
我们开发所谓的web app其实就是一个SPA，单页面应用程序
在SPA中，必然会用到大量的第3方包或者插件
如果还以我们以前那种方式使用第三方包，那么我们的html代码中必然充斥着大量的这样的代码<script src=".../...js"></script>
而且，一个第3方包还可能依赖另外的第4方包，这样我们在开发的时候就很xx了，x知道你依赖哪个第4方、第5方包啊
webpack有一个优点就是可配置，他有一个配置文件，只要你按规范开发我们的项目，此项目所依赖的第3方包都会一一标注在配置文件里，非常清晰。而且，它跟npm配合的天衣无缝。当我们有了这个配置文件，npm下载包的时候，就能够自动下载所有的依赖项。这一下就解决了大问题
其2，一个web应用程序最怕最怕显示器一白，半天没动静是不是？这样用户体验就太差了
如果用户打开一个模块，页面白一下，又打开一个页面，用到了jQuery，又要去请求jQuery的包，又要白一会；再看第3个页面，用到了另外一个UI插件，又要去请求这个UI插件的包，又要白半天。用户体验是很差的，尤其是当页面的实时性要求比较强的情况下，比如付账的页面。白半天，用户心里会慌的1P， 过多的HTTP请求，会降低系统的响应速度，导致较差的用户体验
在很久之前，网络带宽比较低的时代，我们倾向于把带宽的消耗均摊到各个模块，这样每个页面白的时间都不是太长，这个做法是基于2个原因，第1，当时的技术就那个样，谁也没办法。第2，每个页面白那么3、5秒在当时是能接受的，总比打开第1个页面白10分钟强很多，但是到了现在就不同了，带宽很够用了，4G，甚至5G，相比10年前那是飞一样的速度。这时候，如果每个页面都要白一下，那就不可忍受了
所以，以现在的网速和硬件来说，把所有的前端所依赖的资源，打包成1个文件，一次下载过来，更划算。
用户可能在一打开这个app的时候会有一个loading的时间，但是之后就不会了。这样是不是用户体验更好呢？
接下来，我们就来使用webpack，来做项目
使用webpack，先需要通过npm来下载安装
1.首先打开vs，创建一个项目目录
2.然后使用组合键Ctrl+~来呼出VS Code的命令窗口（这里是叫终端）
3.在里边输入一个命令：npm view webpack version，这个命令是用来查看包的最新版本的，
npm view webpack versions ，多了个s，来查看所有版本
4.接下来我们要下载安装webpack，运行命令：npm install webpack -g（-g就是全局安装的意思，其中install可以简写为i。命令也可以写作：npm i webpack -g）
5.下载完了，使用命令：npm ls webpack -g，来查看当前电脑上全局安装的webpack的版本号
（这时候如果想用其他版本的webpack的话：需要这么做npm i webpack@xxx -g,这里的xxx表示你想要使用的版本号）
6.安装完了，打开你node所在的根目录，然后打开node_global这个目录，看看里边有没有webpack
7.接下来，我们还要全局安装一个包webpack-cli
因为webpack4版本，必须跟webpack-cli结合使用，否则webpack不能正常打包
运行命令：npm i webpack-cli -g
（如果你需要一次安装多个包，你不需要一条命令一条命令的去执行。可以一条语句安装多个包：npm i webpack webpack-cli -g
如果你需要一次安装多个包，你不需要一条命令一条命令的去执行。可以一条语句安装多个包：npm i webpack webpack-cli -g）
8.接下来，我们要使用npm和webpack来构建项目工程
（webpack不仅仅是打包工具，更是构建前端项目的工具。这些听起来高大上的概念啊，有时候你可以完全不去理会，先跟着做，做一遍你就知道他是干嘛的了，然后反过头再看这些概念性的东西就理解了）
第1步，先初始化项目(注意：是在终端里运行的)
需要运行命令：npm init [-y]
其中-y打了方括号，表示这是个可选参数。如果你不写这个参数，系统就会跟你交互，问你一大坨问题，让你输入相应的参数。如果你输入-y，这一大坨就直接忽略了，表示我要采用默认值
建议大家直接运行：npm init -y
这时候，你会发现你的项目目录里多了一个文件package.json，这个就是配置文件，为啥webpack构建的项目是可配置的，就是靠它了
