经过一天的研究后,我想提供一个我认为稍微更准确的答案。 webpack 团队发布了一个有用的(并且很难注意到)glossary https://webpack.js.org/glossary/.
我认为关于块和包的困惑在于,这些术语可以指代相同的事物,但应该在 webpack 中的不同点使用process.
webpack 术语定义
Module:离散的功能块提供比完整程序更小的表面积。编写良好的模块提供了可靠的抽象和封装边界,从而构成了连贯的设计和明确的目的。
Chunk:这个 webpack 特定术语在内部使用来管理捆绑process。捆绑包由块组成,块有多种类型(例如条目和子项)。通常,块直接与输出包相对应,但是,有些配置不会产生一对一的关系。
Bundle:捆绑包由许多不同的模块生成,包含最终版本的源文件已经经历过加载和编译过程。
(重点是我加上的)
解释
我将差异总结为:块是一组模块在 webpack 进程中,一个束是一个发出的块或一组块.
在讨论 webpack 进程时,这种区别很有用当它们正在发生时。由于模块被分块在一起,它们可能会发生显着变化(特别是在插件处理期间),因此此时将它们称为捆绑包是不准确的,这些块甚至可能不会在最终输出中作为捆绑包发出!然后,在 webpack 完成后,有一个术语来指代所有发出的最终文件(包)会很有用。
你的例子
所以对于你的例子
{
entry: {
foo: ["webpack/hot/only-dev-server.js","./src/foo.js"],
bar: ["./src/bar.js"]
},
output: {
path: "./dist",
filename: "[name].js"
}
}
-
Modules:“webpack/hot/only-dev-server.js”、“./src/foo.js”、“./src/bar.js”(+这些入口点依赖的任何其他模块!)
-
Chunks: 富,酒吧
-
Bundles: 富,酒吧
在您的示例中,您的块和包具有 1:1 关系,但情况并非总是如此。例如,添加源映射意味着块和包之间存在 1:2 的关系。
资源
- webpack 术语表 https://webpack.js.org/glossary/
- webpack stats 数据文档 https://webpack.js.org/api/stats/
- 问题 970 - 概念 - 捆绑与块 https://github.com/webpack/webpack.js.org/issues/970