webpack 核心易混概念

254 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

webpack 是前端工程师进阶路上必经的路上,很多同学都能说上一两句但是具体到一些小概念大家还都是一辆懵,本文就介绍了几个大家熟知的但可能不了解的概念。

entry

打包开始的入口文件,即具体从源码目录下的哪个文件开始打包。

chunk

chunk 字面意思代码块,可以理解为被抽象和包装之后的一些模块。根据具体配置不同,一个工程打包时可能会产生一个或多个chunk。 是webpack内部运行时的概念;一个chunk是对依赖图的部分进行封装的结果。

bundle

由chunk得到的打包产物我们称为bundle。

一般情况下entry与bundle存在着对应关系,即一个入口对应的一个bundle,比如我们的工程中有两个入口 src/index.js 和 src/lib.js,一般会打包为 dist/index.js 和 dist/lib.js。

但是也有一些特殊情况,一个入口也可能产生多个 chunk 并最终生成多个 bundle。比如sourcemap时,才会出现一个chunk对应多个bundle的情况; ** 以上三者的关系: ** 图片.png

moudle

模块,在 Webpack ⾥⼀切皆模块,⼀个模块对应着⼀个⽂件。 Webpack 会从配置的 Entry 开始递归找 出所有依赖的模块。也就是说每一个js/css文件都是一个模块。