webpack

webpack是一种打包工具，它可以将多个js文件打包成一个js文件，同时也会打包css，可以通过loader处理浏览器不认识的代码。比如将jsx语法处理成js，es6语法处理成es5的。

webpack特点

1.webpack能处理js/json资源，但是不能处理css/img资源
2.生产环境比开发环境多一个压缩的js代码
3.生产环境和开发环境将ES6模块编译成浏览器能够识别的模块

loader的作用：

loader是用来预处理模块的，在一个模块被加载前，会预先使用loader处理模块
webpack默认只会处理js代码，当我们想要打包时，会使用到其他模块，这时候就需要使用loader预处理对应的内容

"babel-loader": //将ES6的语法或者jsx语法转化为浏览器识别的代码
"vue-loader": "^15.7.0",//解析和转化.vue文件，提取其中的逻辑代码，script,style,tempalate,再分别把他们交给对应的loader
"style-loader":  //在html中生成style标签，sty里面就是css内容
"css-loader":  //解释@import 和 url()
"file-loader": 用来处理各种类型的图片，使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字
 "babel-core": "^6.26.3",//把js代码分析成ast，方便各个插件分析语法进行相应处理，有些新语法在低版本 js 中是不存在的
//    如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。首先安装 babel-core

webpack构建流程

入口文件将相关的依赖模块通过递归的方式引进来，形成chunk块，将资源分成不同的资源进行分别处理，最后打包成一个bundle文件输出

从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。

webpack如何优化

优点

1.将浏览器不认识的代码转化为浏览器识别的
2.压缩js，css， html，压缩合并图片
3.代码分割：提取多个页面的公共代码，提起首屏不需要执行部分的代码让他异步加载
4.自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器
5.模块合并：在采用模块化的代码里会有很多模块，将多个模块合并成一个文件并输出