工程化的表现
一切以提高效率、降低成本、质量保证为目的手段都使工程化。
创建：脚手架
编码：代码格式化、编码效率
预览：热更新、Mock、Source Map
代码提交：项目整体检查
部署：自动发布
注意，工程化不是某个工具，工具化只是实现工程化的方式，如vue-cli。node对前端工程化起了非常大的作用。
首先前端工程化是把软件工程相关的方法和思想应用到前端开发中。
狭义上的理解：将开发阶段的代码发布到生产环境，包含：构建，分支管理，自动化测试，部署
广义上理解：前端工程化应该包含从编码开始到发布，运行和维护阶段
也有人把 前端工程化 等同于 效率工程，认为一切能提升前端开发效率、提高前端应用质量的方法和工具都是前端工程化，我觉得这么理解也是没有问题的，提升开发效率、提升产品质量、降低开发难度、降低企业成本应该是工程化的意义所在。
前端工程化的特点
前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。
模块化
在工程化之前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有一定的限制。
模块化是指将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含：
JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的阻碍。
用++Webpack + Babel++将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载；
用++System+Babel++主要是分模块异步加载；
用浏览器的<script type="module">加载。
CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。
虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。按道理，一个模块化的文件应该要隐藏内部作用域，只暴露少量接口给使用者。而按照目前预处理器的方式，导入一个CSS模块后，已存在的样式有被覆盖的风险。虽然重写样式是CSS的一个优势，但这并不利于多人协作。
为了避免全局选择器的冲突，需要制定CSS命名风格：BEM风格、Bootstrap风格等。从工具层面，社区又创造出Shadow DOM、CSS in JS和CSS Modules三种解决方案。
Shadow DOM是WebComponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；
CSS in JS是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难；
CSS Modules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。比如 Vue 中的 style scoped。
资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。
Webpack的强大之处不仅仅在于它统一了JS的各种模块系统，取代了Browserify、RequireJS、SeaJS的工作。更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。资源模块化后，优点是：
依赖关系单一化：所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；
资源处理集成化：现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等；
项目结构清晰化：使用Webpack后，你的项目结构总可以表示成这样的函数： dest = webpack(src, config)。组件化
不同于模块化，模块化只是在文件层面上，对文件、代码和资源拆分，组件化是在设计层面上，对于UI的拆分，页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。
目前市场上的组件化的框架，主要的有Vue，React，Angular2。
通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。
传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。
其次，组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。
所以我们除了封装组件本身，还要合理处理组件之间的关系，比如 （逻辑）继承、（样式）扩展、（模板）嵌套和包含等，这些关系都可以归为依赖。当前主流的大三框架的主要特点也是组件化。
规范化
正所谓无规矩不成方圆，一些好的规范则能很好的帮助我们对项目进行良好的开发管理。规范化指的是我们在工程开发初期以及开发期间制定的系列规范，包括的规范有：
项目目录结构的制定
编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等
前后端接口规范
联调规范
文档规范
文件命名规范
组件管理
样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
git flow 工作流：其中包含分支命名规范、代码合并规范、Commit描述规范等
定期codeReview
视觉图标规范自动化
也就是简单重复的工作交给机器来做，从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包代替我们来完成，都能为我们节省很多工作。例如持续集成、自动化构建、自动化部署、自动化测试等等。
