Question

我无法理解模块，块和捆绑等概念。

{
  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吗？

Answer 1

花了一天时间深入研究这个问题后，我想提供一些我认为更准确的答案。 webpack团队发布了一个有用的（并且很难注意到）glossary。

我认为关于块和捆绑的混淆是术语可以指代相同的东西，但应该在webpack 进程的不同点使用。

webpack术语表定义

模块：离散的功能块，提供比完整程序更小的表面积。编写良好的模块提供了可靠的抽象和封装边界，构成了一致的设计和明确的目的。

块：此网络包特定术语在内部用于管理捆绑流程。捆绑包由块组成，其中有几种类型（例如入口和子）。通常，块直接与输出束相对应，但是，有些配置不会产生一对一的关系。

捆绑：捆绑包来自多个不同的模块，包含已经过加载和编译的最终版本源文件过程

（强调我加入）

解释

我总结区别为：一个块是webpack进程中的一组模块，一个包是发出的块或一组块。

在讨论webpack进程时，这种区别非常有用。由于模块被组合在一起，它们可以发生显着变化（特别是在插件处理过程中），因此在那时调用它们是不准确的，在最终输出中块甚至可能不会作为包发出！然后在webpack完成后，有一个术语来引用所有发出的最终文件（包）。

你的例子

所以对你的例子

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

模块：“webpack / hot / only-dev-server.js”，“。/ src / foo.js”，“。/ src / bar.js”（+任何其他模块这些入口点的依赖关系！）
Chunks ：foo，bar
捆绑：foo，bar

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

资源

Answer 2

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

如果您不希望将所有代码放入一个庞大的捆绑包中，则会将其拆分为多个捆绑包，这些捆绑包在webpack术语中称为块。在某些情况下，您将自己定义代码的拆分方式（entry指向多个文件和输出文件模板，如[name].[chunkhash].js），在其他情况下，webpack将为您执行此操作（例如，与CommonsChunkPlugin）。

模块是JS模块（例如CommonJS或ES6模块）。因为内部webpack只处理模块，所有非js资产也包含在模块中。因此，如果您有一些.sass个文件，那么您将在JS文件中import / require将它们捆绑在一起，但如果您使用ExtractTextWebpackPlugin它将输出一个为这些文件分开CSS包。

Answer 3

我一直在寻找有关拆分捆绑包介绍性小零件的更多详细信息，并找到了您的问题……以及到目前为止，我从这个好文章中找到了这个主题，我真的为您推荐它：

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

更多内容：https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312

webpack中的模块，块和包是什么？

3 个答案:

webpack术语表定义

解释

你的例子

资源