总结（个人笔记）

1.promise：三种状态，pending等待中，resolve成功状态，rejected 失败状态 配合then方法使用；

2.async/await：async声明一个异步函数，返回值是一个promise对象，配合await使用(reslove状态)最好放在try{}catch{}里面做一个容错,then方法的语法糖。

3.使用箭头函数注意：

a.用了箭头函数，this就不是指向window，而是父级（指向是可变的

b.不能够使用arguments对象

c.不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误

d.不可以使用yield命令，因此箭头函数不能用作 Generator 函数

4.浏览器渲染过程：

a.获取html文档构建dom树；

b.解析css构建cssdom树，

c.合并dom树，cssdom树，构建render树

d.根据render树进行布局，然后绘制；

5.webpack核心概念：

ertry入口文件，告诉webpack从哪个模块作为构建项目的起点

output告诉webpack在哪里输出打包好的代码，默认为dist

Loader：本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果； 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。

Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

Webpack构建过程

1. 从entry里配置的module开始递归解析entry依赖的所有module

2. 每找到一个module，就会根据配置的loader去找对应的转换规则

3. 对module进行转换后，再解析出当前module依赖的module

4. 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk

5. 最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行plugin里定义的逻辑

webpack优化：使用babel-loader开启缓存；image-webpack-loader压缩图片；thread-loader；uglifyjs-webpack-plugin 压缩JS代码；exclude/include (确定 loader 规则范围)；html-webpack-externals-plugin

6. hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。