指定一个或多个入口( entry),也就是告诉 Webpack具体从源码目录下的哪个文件开始打包。
如果把工程中各个模块的依赖关系当 作一棵树,那么入口就是这棵依赖树的根。
这些存在依赖关系的模块会在打包时被封装为一个chunk。
chunk字面的意思是代码块,在Webpack中可以理解成被抽象和包装过后的一些模块。它就像一个装着很多文件的文件袋,里面的文件就是各个模块,Webpack在外面加 了一层包裹,从而形成了chunk。根据具体配置不同,一个工程打包时可能会产生一个
或多个chunk。
Webpack会从入口文件开始检索,并将具有依赖关系的模 块生成一棵依赖树,最终得到一个chunk。由这个chunk得到的打包产物我们一般称之 为 bundle。entry、chunk、bundle 的关系如图
entry. chunk、bundle 的关系.jpg
在工程中可以定义多个入口,每一个入口都会产生一个结果资源。比如我们工程中 有两个入口 src/index.js 和 src/lib.js,在一般情形下会打包生成 dist/index.js 和 dist/lib.js, 因此可以说,entry与bundle存在着对应关系
entry与bundle的对应关系.png
在一些特殊情况下,一个入口也可能产生多个chunk并最终生成多个bundle
网友评论