我不能很好地理解模块、块和捆绑等概念。
{
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 和 foo.js 都是块吗？ foo 和 bar 都是捆绑包吗？ foo.js 和 bar.js 都是模块吗？
【问题讨论】：
标签： webpack
在花了一天时间研究这个之后，我想提供一个我认为稍微更准确的答案。 webpack 团队发布了一个有用的（但很难注意到）glossary。
我认为关于 chunks 和 bundles 的混淆在于这些术语可以指同一个东西，但应该在 webpack process 的不同点使用。
模块：提供比完整程序更小的表面积的离散功能块。编写良好的模块提供了坚实的抽象和封装边界，构成了连贯的设计和明确的目的。
Chunk：这个特定于 webpack 的术语在内部用于管理捆绑 进程。捆绑包由块组成，其中有几种类型（例如条目和子）。通常，块与输出包直接对应，但是，有些配置不会产生一对一的关系。
Bundle：由多个不同的模块生成，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"
}
}
在您的示例中，您的块和捆绑包具有 1:1 的关系，但情况并非总是如此。例如，添加源映射意味着您在块和包之间具有 1:2 的关系。
【讨论】：
bundle 是一些相关代码打包到一个文件中。
如果您不想将所有代码放入一个巨大的包中，您可以将其拆分为多个包，在 webpack 术语中称为 chunks。在某些情况下，您将自己定义代码如何拆分块（使用指向多个文件的entry 和像[name].[chunkhash].js 这样的输出文件模板），在其他情况下，webpack 会为您完成（例如使用CommonsChunkPlugin )。
module 是一个 JS 模块（例如 CommonJS 或 ES6 模块）。因为 webpack 内部只处理模块，所以所有非 js 资产也都包装在模块中。因此，例如，如果您有一些 .sass 文件，您将在 JS 文件中将 import/require 用于捆绑它们，但如果您使用 ExtractTextWebpackPlugin，它将为这些文件输出一个单独的 CSS 包。
【讨论】：
我一直在寻找有关将捆绑包拆分为小部分的更多详细信息，并找到了您的问题……以及我对这个主题的深入了解，并从一篇好文章中找到了这个，我真的向您推荐它：
块是代码，它将与 main.js 的主包分开并形成它自己的文件，称为块文件。有两种类型的块，即。同步和异步。同步块与 main.js 同步加载，您会在源代码中看到元素。异步块按需加载（延迟加载），您会在开发人员工具中看到对异步块文件的网络请求。这些块是根据某些条件从 main.js 中吐出的，我们需要将其告知 Webpack。这是通过称为 splitChunksPlugin 的 Webpack 插件完成的。
更多：https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312
【讨论】：