什么是前端工程化？

前端工程化是依据业务特点，将前端开发的规范、流程、技术、工具、经验形成规范，并且成立一种标准体系。

为什么要前端工程化？

我们需要通过规范的流程，自动化的工具来提升开发效率、性能、质量、多人协作能力以及开发体验。

前端现在发展这么快，面临着流程，资源组织和协同开发的种种挑战，团队要成长，建立工程化是必经之路。

but，针对不同公司和不同的项目，找到最合适的工程化方案才是最重要的，什么规范，流程，技术，可以先放一下。

有什么构建工具？

构建工具是干嘛的？

主要是实现自动化的处理，例如代码检查，预编译，合并，压缩，生成雪碧图，sourceMap，版本管理，单元测试，以及监控。

构建工具三剑客

• Grunt
• Gulp
• Webpack

Grunt，Gulp基于任务运行

由上图可知，它们打包的策略通常是 All in one，最后页面还是引用 css、img、js，可以这么说，只是帮我们把同一类型的文件整合到了一起，压缩了代码。然而，还是手撸无疑。

Grunt优点

配置驱动，简单直接

Grunt缺点

当任务非常多的时候，利用配置来完成所有事情，太难了！

它的IO操作，每一次任务都要从磁盘读取文件，处理完之后，再写入磁盘，当源文件较多的时候，任务很复杂，性能就堪忧了。如果我想操作less， 读取less---编译成css---存储到磁盘---读取css---css压缩处理---存储到磁盘

Gulp优点

代码驱动，写任务和nodejs代码一样

再者，对文件的读取是流式操作，一次IO可以处理多个任务gulp处理less的操作是 读取less---编译成css---压缩处理---存储到磁盘

它们侧重对整个过程的控制管理，实现简单、对架构无要求、不改变开发模式，所以非常适合前端、小型、需要快速启动的项目。

Browserify、Webpack、rollup.js 基于模块化打包

主要介绍一下webpack

webpack特点

• 把一切都看作模块，html，js，css，image都可以互相引用，通过定义入口文件 entry.js 对所有依赖进行跟踪，各模块通过loader，plugins处理，最后打包到一起。
• 按需加载 webapck会将文件分为多个代码块（chunks），还能将重复部分提取出来作为commonChunk，实现按需加在。

webpack缺点

• 上手优点蛋疼
• 构建多页面应用配置比较麻烦，而且不好打到按需加在。

适用场景：

综上所述，Webpack 特别适合配合 React.js、Vue.js 构建单页面应用以及需要多人合作的大型项目，在规范流程都已约定好的情况下往往能极大的提升开发效率与开发体验。