工程化的定义和主要解决的问题：
前端工程化是指遵循一定的标准和规范通过工具去提高效率降低成本的一种手段。技术是为了解决问题而存在的，前端开发所面临的问题：
- 想要使用ES6+新特性，但是兼容有问题；
- 想要使用Less/Sass/Sass/PostCss增强css的编程性但是运行环境不能直接支持；
- 想要使用模块化的方式提高项目的可维护性但是运行环境不能直接支持；
- 部署上线前需要手动压缩代码及资源文件；
- 部署过程中需要手动需要手动上传代码到服务器；
- 多人开发，无法硬性统一大家的代码风格；
- 从仓库中pull回来的代码质量无法保证；
- 部分功能开发时需要等待后端服务接口提前完成；
总结下来有下面几大类：
- 传统语言或语法的弊端
- 无法使用模块化或组件化
- 重复的机械式工作
- 代码风格统一、质量保证
- 依赖后端服务接口支持
- 整体依赖后端项目
一个项目过程中工程化的体现：
工程化表现：一切以提高效率、降低成本、质量保证为目的的手段都属于工程化，就是将一切重复的工作都可以实现自动化。
创建项目：
- 创建项目结构：使用脚手架工具自动的完成基础结构的搭建
- 创建特定类型文件
编码：
- 代码格式化
- 校验代码风格
- 编译/构建/打包
预览/测试：
- WebServer / Mock ：提供热更新
- Live Reloading / HMR
- Source Map
提交：
- Git Hooks
- Lint-staged
- 持续集成
部署：
- CI / CD
- 自动发布
工程化不等于工具：
现阶段有部分工具过于强大，比如webpack。就导致很多新手误认为工程化就是指webpack，工具并不是工程化的核心。工程化的核型应该是对项目整体的一种规划或者架构，而工具在这个过程当中只是用来去帮我们落地去实现这种规划或架构的一种手段。用一个普通的项目为例，落实工程化思想的步骤应是去规划一个项目整体的工作流架构，这其中包括规划文件的组织结构、源代码的开发范式（使用什么样的语法、规范、标准去编写代码；使用什么样的方式去做前后端分离：ajax、中间层）。这些都是我们在一开始的时候先要去明确的一个规划，有了这些整体的规划过后在具体去考虑应该选择搭配哪些工具做哪些具体的配置选项，来去实现工程化的整体的一个规划。这才是一个工程化应该有的过程，也可以从一些成熟的集成化方案当中找到一些思路，包括 create-react-app、vue-cli、angular-cli、gatsby-cli它们实际上是一些工程化的集成。
工程化与node
工程化的一切都应该归功与node，node除了让js有了一个新的舞台，更多的是让整个前端行业进行了一次工业革命。没有node就没有今天的前端，而且在接下来很长的一段时间用到的工具几乎都是node开发的。所以说前端工程化是由node强烈推动的，工程化是一个非常庞大的概念，而且这个过程在不断的在成长和发展，值得强调的是不管它如何发展始终它都是为了解决问题而存在的。
