3.1　资源处理流程

在介绍具体的配置之前，我们先大致了解一下Webpack中的资源处理流程。

在一切流程的最开始，我们需要指定一个或多个入口（entry），也就是告诉Webpack具体从源码目录下的哪个文件开始打包。如果把工程中各个模块的依赖关系当作一棵树，那么入口就是这棵依赖树的根，如图3-1所示。

图3-1　依赖关系树

这些存在依赖关系的模块会在打包时被封装为一个chunk。本书后面的部分会经常提及chunk，这里我们先解释一下这个概念。

chunk字面的意思是代码块，在Webpack中可以理解成被抽象和包装后的一些模块。它就像一个装着很多文件的文件袋，里面的文件就是各个模块，Webpack在外面加了一层包裹，从而形成了chunk。根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。

从上面我们已经了解到，Webpack会从入口文件开始检索，并将具有依赖关系的模块生成一棵依赖树，最终得到一个chunk。我们一般将由这个chunk得到的打包产物称为bundle。entry、chunk、bundle的关系如图3-2所示。

图3-2　entry、chunk、bundle的关系

工程中可以定义多个入口，每一个入口都会产生一个结果资源。比如我们的工程中有两个入口——src/index.js和src/lib.js，在一般情形下会打包生成dist/index.js和dist/lib.js，因此可以说entry与bundle存在对应关系，如图3-3所示。

图3-3　entry与bundle的对应关系

在一些特殊情况下，一个入口也可能产生多个chunk并最终生成多个bundle，后文会对这些情况进行更深入的介绍。