webpack:
本质上，webpack是一个现代javaScript应用程序的静态模板打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包括应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
作用：
- 前端碎片文件太多，请求的次数太多，可以将多个碎片组合成一个相对大的文件减少请求次数
- 各种简写的语言不能被浏览器识别，webpack编译成浏览器可以识别的语言
- 浏览器语法降级，语法更新太快，浏览器跟不上
- 代码混淆
四个核心概念:
入口(entry)
webpack打包的启点，可以一个或者多个，一般都是js文件，webpack会从启点文件开始，寻找启点直接或间接依赖的其他所有一拉力，包括js,css，图片资源等，作为将来打包的原始数据
输出(output)
出口一般包括两个属性: path和filename,用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
加载器(loader)
webpack本身只识别js文件，如果要加载非js文件，必须指定一些额外的加载器(loader)，例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
插件(plugins)
插件可以扩展webpack的功能，让webpack 不仅仅时完成打包，甚至各种更复杂的功能，或者时对打包功能进行优化，压缩，提高效率。
自己去构建webpack的所有配置，完成打包会比较麻烦，还好，vue官方给出了一个工具，叫做vue-cli，可以帮我们快速搭建vue项目，里面已经内置了webpack。
Vue-cli
安装脚手架插件命令：
npm install --g vue-cli （–g：全局安装）
升级命令
npm install -g @vue/cli
查看版本
vue --version
使用脚手架搭建
npm install -g @vue/cli-init
vue init webpack