webpack 的编译原理

自从接触了react，vue 这两个框架，都会用到webpack这个打包工具。面试的时候，经常被问到知道webpack的编译原理吗？ 可以简单的介绍一下。每每这个时候都被问的哑口无言，平时用的时候挺顺手，真正说点之乎者也出来，还是有点难度的。

一、 webpack 的作用

总结为一下三点：

1、依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块。

2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS（压缩代码）可以减少、优化代码的体积。

3、各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript,eslint 可以检查编译期的错误。

一句话总结：webpack 的作用就是处理依赖，模块化，打包压缩文件，管理插件。

二、webpack 的原理

一切皆为模块，由于webpack只支持js文件，所以需要用loader 转换为webpack支持的模块，其中plugin 用于扩张webpack 的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情。

webpack怎么工作的过程：

1、解析配置参数，合并从shell(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；

2、注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应；

3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；

4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；

5、递归结束后得到每个文件最终的结果，根据entry 配置生成代码chunk(打包之后的名字)；

6、输出所以chunk 到文件系统。