深入理解webpack打包机制

发布时间：2020-12-24 18:58:00 所属栏目：资源来源：网络整理

导读：一、单入口文件如何打包 /src/single/index.js index2 = require( util = require( console.log(index2); console.log(util); /src/single/index2.js util = require( = ; /src/single/util.js module.exports = ; /config/webpack.config.single.js webpack

首先讲解代码前需要理解两个概念，分别是 module 和 chunk

chunk 代表生成后 js 文件，一个 chunkId 对应一个打包好的 js 文件(一共五个)，从这段代码可以看出，manifest 的 chunkId 为 4，并且从代码中还可以看到：0-3 分别对应异步 utilC,pageA,pageB,vendor 公共模块文件，这也就是我们为什么不能将这段代码放在 vendor 的原因，因为文件的 hash 值会变。内容变了，vendor 生成的 hash 值也就变了。
module 对应着模块，可以简单理解为打包前每个 js 文件对应一个模块，也就是之前__webpack_require__加载的模块，同样的使用数组下标作为 moduleId 且是唯一不重复的。

那么为什么要区分 chunk 和 module 呢？

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

9/17

首页

尾页