前端在发展，那不是一点快啊，现在的前端项目不再是拼凑几个html页面和写上一堆Jquery就能完成的，web业务正在变得日益复杂，一个Web App的开发难度，类似于开发一个简易型的native app，随之带来了一系列的问题，如何进行高效的多人开发，如何保证优秀的性能，还有如何减少加班时间等等。
前端工程化的内容有哪些？
模块化
规范化
自动化
组件化
一、模块化
模块化是多人协作的基础。
简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能。
想一想，为什么模块很重要？
因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！
js的模块化
在es6之前，有commonJS，AMD，CMD规范，现在有es6的模块系统
commonJS规范
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的
而且：CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作
服务端NodeJS采用了commonJS规范
AMD规范
服务端模块有了，那么客户端模块呢，
可commonJS规范不适用浏览器，问题出在了同步，如果在浏览器端加载模块是同步的，如果当模块加载慢(可能是网速导致)，整个浏览器就好像处于未响应状态，所以不能采用"同步加载"，所以AMD规范就诞生了。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
参考：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
ES6模块系统
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，并且不会缓存值，模块里面的变量绑定其所在的模块。
ES6模块化负责处理不同模块间的耦合关联，具体到编译时处理所有的模块依赖，将模块打包成文件传输等工作可以用打包工具webpack等来完成，
css的模块化
SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。
怎么解决选择器冲突问题，一般有两点：
1.指定命名规则，
2.CSS Modules css的模块化。
css Modules 是什么？
顾名思义：css模块化。
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
CSS Modules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scoped style也算是一种。
学习css Modules：http://www.ruanyifeng.com/blog/2016/06/css_modules.html
二、规范化
目录结构的制定
编码规范
前后端接口规范
文档规范
组件管理
Git分支管理
Commit描述规范
定期CodeReview
视觉图标规范
编码规范
编码规范一般采用ESLint
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。
三、自动化
前端工程化的很多脏活累活都应该交给自动化工具来完成。
持续集成
自动化构建
自动化部署
自动化测试
前端自动化测试能够提高代码质量、减少人肉测试等，这些优点是不言而喻的。
参考：https://www.zhihu.com/question/24558375
来源：https://www.cnblogs.com/luyuans/p/7799192.html