Webpack的作用（一个基础的打包编译工具在做什么?）

最新推荐文章于 2022-10-10 16:09:43 发布

dglf54292

最新推荐文章于 2022-10-10 16:09:43 发布

阅读量116

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/eret9616/p/9154297.html

版权

结论:

转换ES6语法成ES5
处理模块加载依赖
生成一个可以在浏览器加载执行的 js 文件

第一个问题，转换语法，其实我们可以通过babel来做。核心步骤也就是：

通过babylon生成AST
通过babel-core将AST重新生成源码

第二步需要处理模块依赖的关系，那就需要得到一个依赖关系视图，babel-traverse提供了一个可以遍历AST视图并做处理的功能，通过 ImportDeclaration 可以得到依赖属性，

得到根文件的依赖关系和编译后的代码，比如我们的index.js依赖了test.js但是我们并不知道test.js还需要依赖message.js，他们的源码也是没有编译过。所以此时我们还需要做深度遍历，得到完成的深度依赖关系，完成了所有文件的编译解析。

最后一步，就是需要我们按照webpack的思想对源码进行一些包装。第一步，先是要生成一个modules对象，得到 modules 对象后，接下来对整体文件的外部包装，注册require，module.exports，函数内部，循环执行每个依赖文件的 JS 代码而已，完成代码，到这里基本上也就介绍完了。

转载于:https://www.cnblogs.com/eret9616/p/9154297.html