当前环境？
目前来说，web业务日益复杂化和多元化，前端开发从webpage模式为主转变为webapp模式为主，前端的开发工作在某些
场景下被认为是日常的一项简单工作，或者是某个项目的附属品，而没有看成一个软件被认真对待。
在模式的转变下，前端工程化日益复杂，会产生很多问题：
例如 如何进行高效的多人协作，如何保证项目的可维护性，如何提高项目的开发质量，如何降低项目的生产风险。
前端工程化是根据软件工程的技术和方法对前端的工具，技术，开发流程，经验等进行规范，使其更具规范化和标准化
，其目的是提高开发效率和降低生产成本，即提高开发过程的开发效率，减少重复的开发时间，其实前端工程化是软件
工程的一部分，可以从理解软件工程的角度去探讨。
什么是前端工程化？
前端工程化里的工程是一个很大的概念，甚至创建一个git仓库，也可以理解为创建了一个工程，软件工程的定义是运
用计算机科学的理论和技术，以及工程管理的原则和方法，按进度和预算，实现满足用户要求的软件产品的定义，开发
和维护的工程以及研究的学科。
前端工程化是为了让前端可以自成体系，具体可以从四方面去讨论，模块化，组件化，规范化和自动化。
模块化？
模块化：将大的文件拆分成互相依赖的小文件，再进行统一的拼装和加载。
js的模块化：利用webpack+babel的模式将所有模块系统进行打包，同步加载，也可以搭乘多个chunk异步加载。
利用浏览器的script标签，type类型选modules类型即可。
css模块化：之前的sass less 等预处理器虽然实现了css的拆分，但是并没有解决模块化很重要的一个问题，即选择器
的全局污染问题。有三种解决办法，第一种是利用webcomponents的技术实现，这个技术虽然解决了全局污染问题，但
是由于兼容性问题，目前用的不多，第二种是css in js 将css的技术全部摒弃，利用js或者json格式去加载css，这种
方式简单粗暴，并且不容易处理伪类选择器的问题，被大众所认可的是第三种解决方案，即 css modules ，所有的css
文件由js来管理，这种技术最大程度利用了css的生态和模块化的原则，其中vue中的scoped 就是这种技术的提现。
资源的模块化：webpack的成功不仅仅是因为将js系统进行模块化处理，而是它的模块化原理，即任何资源都可以模块
化且应该模块化处理，优点有以下三点，1：目录结构清晰化，2：资源处理集成化，3：项目依赖单一化。
组件化？
组件化：将UI页面拆分正有模板+样式+逻辑组成的功能单元，称为组件，组件化不等于模块化，模块化是在资源和代码
方面对文件的拆分，而组件化是在UI层面进行的拆分。
传统前端框架的思想是以dom优先，先操作dom，再写出可复用的逻辑单元来操作dom，而组件化框架是组件优先，将dom
和与之一起的逻辑组成一个组件，再进行引用。
我们封装了组件后，还需要对组件间的关系进行判定，例如继承，扩展，嵌套，包含等，这些关系统称为依赖
规范化？
规范化：规范化是前端工程化很重要的一部分，项目前期规范制定的好坏，直接决定后期的开发质量，分为
项目目录规范化，编码规范化，前后端接口规范化，git分支管理，commit描述规范，组件管理等编码规范化分为html
css js img 命名规范这几类 接口规范，目的是规则先行，以减少联调中不必要的问题和麻烦，自责划分 前端，渲染
逻辑和交互逻辑，后台，处理业务逻辑，各种格式的规定，例如 json尽量简洁轻量，日期尽量字符串，等等。
自动化？
自动化：让简单重复的工作交给机器完成，例如自动化测试，自动化部署，自动化构建，持续继承等。
参考大神链接：
https://www.jianshu.com/p/88ed70476adb