Webpack中的模块，块和捆绑是什么？

网络包 Webpack

Pro凯

2020-03-24

我不太了解模块，块和捆绑等概念。

{
  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两个模块？

第3372篇《Webpack中的模块，块和捆绑是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

理查德神无 2020.03.24

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

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

理查德Davaid小卤蛋 2020.03.24

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

如果您不希望将所有代码放入一个单独的巨大捆绑中，则可以将其拆分为多个捆绑，这在webpack术语中称为块。在某些情况下，您将定义自己如何拆分代码（使用entry指向多个文件和一个输出文件模板，如[name].[chunkhash].js），在其他情况下，webpack会为您完成（例如使用CommonsChunkPlugin）。

甲模块是一个JS模块（例如一个CommonJS的或ES6模块）。因为内部webpack只处理模块，所以所有非js资产也都包装在模块中。所以，如果你有一些.sass文件，例如，你会import/ require他们在JS文件对它们进行捆绑，但如果你使用ExtractTextWebpackPlugin它会输出一个单独的CSS捆绑这些文件。

古一 2020.03.24

在花了一天的时间进行深入研究之后，我想提供我认为是稍微准确的答案。Webpack团队已经发布了一个有用的词汇表（并且很棘手）。

我相信关于块和捆绑的困惑是这些术语可以指代同一件事，但是应该在webpack 流程的不同点使用。

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"
  }
}