webpack 中的 module、chunk、bundle 分别是什么？

我不太理解模块、块和捆绑等概念。

{
  entry: {
    foo: ['webpack/hot/only-dev-server.js', './src/foo.js'],
    bar: ['./src/bar.js']
  },
  output: {
    path: './dist',
    filename: '[name].js'
  }
}

上述配置中，有only-dev-server.js and foo.js两个块？是foo and bar两个捆绑？是foo.js and bar.js两个模块？

经过一天的研究后，我想提供一个我认为稍微更准确的答案。 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