谈到前端工程化问题，总觉得这是一个很大到问题，同时也是一个当前比较热聊到一个前端所面临的问题。其实从前后端分离，前端独立出来，到现在的前端迅速发展，经历的时间并不长，尽管当前有像vue，angular，react这样的框架供开发者使用，也大大提高了效率，但似乎离前端刀耕火种的年代并没有多远。所以前端工程化也就应运而生。
什么是前端工程化？
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。
如何前端工程化？
前端工程化，需要从四点做起：模块化，组件化，规范化和自动化。
（1）模块化
模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。在工程化之前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有一定的限制。
js模块化：在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。用++Webpack + Babel++将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载；用++System+Babel++主要是分模块异步加载；用浏览器的<script type="module">加载。CSS模块化：虽然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的scoped style也算是一种。资源模块化：Webpack的强大之处不仅仅在于它统一了JS的各种模块系统，取代了Browserify、RequireJS、SeaJS的工作。更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。资源模块化后，优点是：依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等；项目结构清晰化。使用Webpack后，你的项目结构总可以表示成这样的函数： dest = webpack(src, config)。（2）组件化
组件化≠模块化。模板化是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。
传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。
其次，组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。
所以我们除了封装组件本身，还要合理处理组件之间的关系，比如 （逻辑）继承、（样式）扩展、（模板）嵌套和包含等，这些关系都可以归为依赖。当前主流的大三框架的主要特点也是组件化。
（3）规范化
在我们平时开发过程中，总会遇到去修改自己不熟悉的代码，然后去抱怨一堆，这就是没有规范的原因，我们每个人都有每个人自己的开发特点，没有形成规范，这代码写的就是千奇百怪，代码的维护性就非常差劲儿。所以，从项目搭建的前期就要制定好响应的规范，如：js规范，css规范，前后端接口规范，命名规范等，以及到最后的git规范，这都会大大提升开发效率。
（4）自动化
这里所说的自动化，应该指的是自动化工具了，在前端开发的过程中有很多繁琐的事情，都需要交给自动化工具来完成，比如，自动测试，自动化部署等等一系列东西。
前端工程化还有很长的路要走，随着车轮的不断向前，效率终将越来越高。。。