webpack在前端开发中是非常常用的，但是很多人对webpack的认识只是处于了解的阶段，一些配置操作，对webpack的运行过程并不是很了解。希望这篇文章能给你带来更多的知识。一般情况下，webpack打包只会生成js文件，称为bundle。bundle文件可能很长，可能会比较混乱，所以一般开发者不会看这个文件的具体内容，只知道这个文件可以加载运行。那么bundle文件中的逻辑是什么样的呢？如果直接看bundle，还真的看不清楚。可以修改一些配置（mode=development，单独把manifest文件分开）让代码更清晰。在这个配置中，除了生成一些bundle文件外，还有一个manifest文件。文件比较小，而且因为是开发模式，manifest文件是可读的。清单文件是bundle运行的入口文件。以下是对manifest中逻辑的解读。读者也可以参考代码自行阅读理解。建议自己整理代码。关于本文出现的代码片段，webpack版本为4，配置为mode:development时的编译结果，//为代码原注释，////为作者注释，而评论的内容包括对代码逻辑的评论，阅读中的疑惑和思考问题。整个主逻辑清单文件是一个自执行函数IIFE。大部分内容是变量和函数的定义。直接在IIFE中运行的代码如下varinstalledModules={}varinstalledChunks={//加载默认清单"webpackManifest":0};vardeferredModules=[];////定义/获取webpackJsonp，绑定推送函数varjsonpArray=window["webpackJsonp"]=window["webpackJsonp"]||[];varoldJsonpFunction=jsonpArray.push.bind(jsonpArray);////重新定义pushjsonpArray.push=webpackJsonpCallback;////复制数组jsonpArray=jsonpArray.slice();////预计是加载模块的逻辑for(vari=0;i
