前端项目工程化工具webpack，gulp，babel的使用和原理

一、项目中的工程化

1.什么是前端模块化

前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

所谓的前端模块化开发，我的理解就是，在开发的时候，把不同的资源文件按照他的具体用途进行分类管理，在使用的时候利用CommonJS、AMD、CMD等规范将这些资源文件引入到当前文件中。然后在测试或者最后上线的时候，将这些资源文件按照一定的要求进行压缩合并再加上版本控制处理。

可能这样的理解或者说法值得商榷，但是个人还是觉得模块化就是对内容的管理，是为了解耦合。

2. 前端模块化包含哪些方面

• node.js 运行时，npm 包管理
• expressjs 服务端框架
• babel 编译 ES2015+ 代码到 ES5
• webpack打包和压缩源码
• eslint 检查代码规范(腾讯那套)
• prettier.js 代码自动美化排版
• git hook规范代码提交格式（按照anjular.js）
• mocha 单元测试

二、webpack使用和工作原理

webpack是前端项目打包工具，它是现代前端模块化开发的基石，它的主要工作：分析项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

1. 工作原理

webpack启动后，会在entry里配置的module开始递归解析entry所依赖的所有module，每找到一个module, 就会根据配置的loader去找相应的转换规则，对module进行转换后在解析当前module所依赖的module，这些模块会以entry为分组，一个entry和所有相依赖的module也就是一个chunk，最后webpack会把所有chunk转换成文件输出，在整个流程中webpack会在恰当的时机执行plugin的逻辑。

loader是什么？loader是webpack最重要的部分之一，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里边单独用module进行配置。
1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js
2、转换这些文件，从而使其能够被添加到依赖图中。

loader和plugin的区别：
plugins和loader很容易搞混，说都是外部引用有什么区别呢？ 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，它直接对整个构建过程起作用。

2. webpack打包优化

• happypack，多线程编译，加快编译速度(加快loader的编译速度), 解决webpck单线程的弊端。
• 分包，使用splitChucks抽取公共代码，重点是缓存组cacheGroups的配置
• 在loader的options中配置cacheDirectory，当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)，cacheDirectory会缓存JavaScript的编译结果。如果遇到不能刷新代码的情况，可以过来看看是不是走了缓存
• 先运行一个dll配置文件，预先把一些固定模块编译，它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中，第二次编译的时候，解析到这些模块就直接使用缓存，而不是去编译这些模块