作为异步驱动编程模型，事件无疑是JavaScript不可或许的部分。

在JavaScript所定义的事件中，它们被分为多种类型。有 表单事件（focus、blur、submit等）、window事件（load、unload、resize等）、鼠标事件（mousedown、mousmove、mousup等），键盘类型（keydown、keyup等）。

针对移动端，还有触摸类型，比如 touchstart、touchmove、touchend、touchcancel 等。另外，HTML5还有各类API事件，比如 dragstart、drag、dragend 等。

目前来说，前后端分离 是web开发的主流模式。前端负责页面制作、交互实现，后端负责数据API的开发。两者并行处理，各司其职，项目开发完毕后一起联调，出了问题也能快速定位。

而通常情况下，后端真实数据的研发往往滞后于UI界面的开发。所以，在项目开始前，前后端会约定好数据格式，这样，前端就可以先利用mock数据进行界面开发。一般的做法，是在本地新建多个json文件，然后利用ajax请求相应的文件，待后端数据接口开发完毕，直接将json地址换成真实接口地址即可。

webpack 里涉及了多种形式的刷新，其中包括文件监听，修改内容时，页面的整体刷新，还有修改组件时，只针对组件的局部刷新。从最基本的 webpack -w，到 webpack-dev-server 与 html-webpack-plugin 的结合，再到 Hot Module Replacement，它们都有其对应的应用场景。

注：本文的内容是对上一篇文章【webpack】的补充与提高，所以，项目结构和文件是相同的。

本文有些内容会前后穿插，需仔细阅读 loader 和 plugin 部分。

说到前端自动化工具，我们总会想到它的这些功能：

编译

将sass、less这类css预处理语言，编译成浏览器可识别的css，如： sass less -> css

将es6，es7这类下一带JavaScript标准或者react的jsx模板，编译成浏览器可识别的 es5，如：es6,es7,coffee，ts，jsx -> es5

有的时候，我们会在页面初始化时，定义一个空对象。当用户进行了某项操作，就给该对象添加对应的属性。最后，当用户完成一系列操作后，将该对象的数据提交给后台，然后作相应反馈。