Webpack 网页包中的模块、块和包是什么？

我不能很好地理解模块、块和捆绑等概念

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

---

在上面的配置中，

是否只有dev server.js

和

foo.js

这两个块？

foo

和

bar

都是捆绑包吗？

foo.js

和

bar.js

都是模块吗？

A捆绑包是打包到单个文件中的一些相关代码

如果您不想将所有代码放在一个巨大的捆绑包中，您将把它分成多个捆绑包，这些捆绑包在webpack术语中称为chunks。在某些情况下，您将自己定义代码如何分割块（使用指向多个文件的

条目和输出文件模板，如
[name].[chunkhash].js
），在其他情况下，webpack将为您执行此操作（例如使用
CommonChunkPlugin
）

模块是JS模块（例如CommonJS或ES6模块）。因为webpack内部只处理模块，所以所有非js资产也包装在模块中。因此，如果您有一些
.sass
文件，例如，您将
导入
/
要求
在JS文件中进行捆绑，但是如果您使用
ExtractTextWebpackPlugin
它将为这些文件输出一个单独的CSS包。
在花了一天时间深入研究之后，我想提供一个我认为稍微更准确的答案。webpack团队发布了一个有用的（但很难注意到的）报告

我相信关于块和包的混淆在于，这些术语可以指同一事物，但应该在网页过程中的不同点使用

网页词汇表定义
模块：提供比完整程序更小表面积的离散功能块。编写良好的模块提供了坚实的抽象和封装边界，构成了连贯的设计和明确的目的

区块：此特定于网页包的术语在内部用于管理捆绑过程。bundle由块组成，块有几种类型（例如entry和child）。通常，块直接对应于输出包，但是，有些配置不产生一对一的关系

捆绑包：捆绑包由许多不同的模块生成，包含已经历加载和编译过程的源文件的最终版本

（重点由我补充）

解读
我将差异总结为：一个块是一组模块在网页包过程中，一个包是一个发出的块或一组块

当讨论正在发生的网页包过程时，这种区别很有用。由于模块被分块在一起，它们可能会发生显著的变化（特别是在插件处理期间），因此此时调用它们bundle是不准确的，在最终输出中，这些分块甚至可能不会作为bundle发出！然后，在webpack完成之后，有一个术语来指代所有发出的最终文件（bundle）是很有用的

你的榜样
以你为例

{
条目：{
foo:[“webpack/hot/only dev server.js”，“/src/foo.js”]，
bar:[“/src/bar.js”]
},
输出：{
路径：“./dist”，
文件名：“[name].js”
}
}


模块：“webpack/hot/only dev server.js”、“/src/foo.js”、“/src/bar.js”（+与这些入口点相关的任何其他模块！）
块：foo，bar
捆绑：foo，bar

在您的示例中，块和包具有1:1的关系，但情况并非总是如此。例如，添加源映射意味着您在块和包之间有1:2的关系

资源




我正在寻找有关拆分捆绑包简介小部件的更多详细信息，并找到了您的问题……以及我在本主题中所做的工作，并从一篇好文章中找到了这篇文章，我真的向您推荐：

区块是从main.js主捆绑包中分离出来的代码，它形成自己的文件，称为区块文件。有两种类型的块，即。同步和异步。同步块与main.js同步加载，您将在源代码中看到元素。异步块是按需加载的（延迟加载），您将在开发人员工具中看到异步块文件的网络请求。这些块是基于某些条件从main.js中吐出的，我们需要告诉网页。这是通过名为splitChunksPlugin的网页包插件完成的

更多信息：
这是一篇很好的文章，可以让你更清楚一点@chchChrist虽然这是一篇很好的文章，但不幸的是它没有回答“bundle vs chunk”这个简单的问题。讨论：你的回答很好，但它仍然没有为我澄清chunk和bundle之间的区别。两者似乎都引用了生成的文件。但我找不到它们之间的任何区别。据我所知，区块只是由插件或您手动配置输出区块名称自动生成的捆绑包。基本上，块只是webpack生成的包。有些区块是入口点，会在其他区块上。是的，我还是不点击。我看不出这些术语与我最终得到的输出文件有什么关系。我评论过，你可能会感兴趣。我从来没有见过两者的定义。但从上下文来看，块是webpack生成的包。“块”一词意味着它是某事物的一部分。具有相互依赖性的多个块一起用于一个目的。所以你可以有多个块，每个块都包含一些代码，比如一个网页，它们都依赖于一堆共享块中的一些共享代码。