核心提示：前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是最大程度地提高前端工程师的开发效率。模块化js模块化在ES6之前，JavaScript一直没有模块系统，这...
前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。
它的目的是最大程度地提高前端工程师的开发效率。
模块化
js模块化
在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。
现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。
js模块一般根据逻辑进行划分，如：ajax、配置config、DOM操作、工具函数utils等。
规范确定了，然后就是模块的打包和加载问题
用Webpack+Babel将所有模块打包成一个文件同步加载
CSS模块化
通常是通过Sass、less等css预处理器的mixin来实现的。
资源模块化
Webpack的强大之处不仅仅在于它统一了JS的各种模块系统，更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。
组件化
组件化≠模块化
模块化只是在文件层面上或者逻辑层面上，对代码或资源的拆分; 而组件化是在设计层面上，对UI的拆分。
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件化理念：
页面上每个独立的可视/可交互区域为一个组件。 每个组件对应一个工程目录，组件所需的各种资源如HTML、CSS、js、图片等都在这个目录下维护 组件与组件间可以自由组合。
现在也有很多支持组件化的框架如React。
规范化
目录结构 编码规范：ESLint 前后端接口规范 ……
自动化
能够使用工具来完成的事情就不要人工来做，使用gulp这种工具来完成工作流中的大部分任务
