前端工程化就是通过各种工具和技术，提升前端的开发效率的过程。就是为了让前端开发能够自成体系，个人认为可以从模块化、组件化、规范化、自动化四个方面思考。

模块化

简单的来说，模块化就是将一个大文件拆分成互相依赖的小文件，再进行统一拼装和加载。
1.js模块化
在ES6引入了模块化的概念，如CommonJS、CMD、AMD
2.css模块化
虽然现在有sass、less、stylus等预处理器实现了css的文件拆分，但是没有解决选择器全局污染的问题。
为了避免全局选择器的冲突，需要制定css命名规范：

• Bootstrap风格
• BEM风格
• css in js是彻底抛弃了css，all in js使用js或者json来写
• css module仍使用css，只是让js来管理依赖。他能够最大化的结合css生态和js模块化能力，目前看来是最好的解决方法。vue的scoped style也算是一种
  3.资源的模块化
  webpack的强大之处不仅仅在于它统一了js的各种模块系统，更重要的是它的万能模块加载理念，也就是所有资源都可以模块化

组件化

模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI进行拆分

规范化

规范化其实是工程化中很重要的一部分，项目初期制定的好坏直接影响到后期的开发质量。
比如：

• 目录结构的制定
  目录结构的合理设定，能为项目带来很多优点：
  • 有助于提高项目的逻辑结构合理性
  • 对应扩展和合作
  • 方便资源的统一定位管理
• 编码规范
  • 制定一套良好的编码规范可以增强团队开发协作、提高代码质量。前端代码规范

自动化

任何简单机械的重复劳动都应该让机器去完成。

• 图标合并
• 持续集成
• 自动化构建
• 自动化部署
• 自动化测试