本文介绍了webpack编译vue项目生成的代码探索，分享给大家，具体如下：往 main.js 里写入最简单的 vue 项目结构如下App.vue 如下编译生成后得到一个316kb的文件，而在316Kb中包含着什么，我很好奇想探索一番。都和 node_modules/setimmediate 有关，由于 vue 的 DOM 异步更新机制使用到了它，所以被引入。这里也不做详解，只给出结构。和 App.vue 的解析有关，把 App.vue 中的 template 和 script 编译为一个 vue components，并把 style 标签内的样式插入到DOM中。都和样式有关，简言之就是7号模块加载8号模块获取css代码作为参数，并作为参数传入10号模块进行插入太长也只大意上列出结构。12号做 .vue 文件中的 template 和 script 解析并供6号输出，最终返回了一个 vue components 对象，在浏览器控制台打印如下：而13号模块返回具体 script 中的代码，而14号模块则是把 template 解析为一堆 vue render 函数。
暂无评论