捆绑VS。打包在webpack4中

Question

我正在学习webpack。但这使我对Bundle和Block感到困惑。我已经对这两个概念做了一些搜索。但是仍然不清楚。 我自己做了一些测试：

entry: {
  app: './src/app.js',
  people: './src/people.js'
}

plugins:[
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: "[name].css"
    })
        // new WebpackBundleAnalyzer()
    ]

在构建之后：

我的想法是： 这四行是块，那么束是什么？

Answer 1

对于Webpack，捆绑包只是生成的模块，它是通过构建依赖图来映射项目所需的每个模块而生成的。在后台，Webpack删除了未使用的代码，检测循环依赖关系，最小化代码等。最后，您将获得一个现成的模块，该模块可以包含在页面中。

documentation完美地突出了差异：

捆绑包：

  

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

块：

  

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

当您的应用程序很大时，将大捆绑包分成多个块并延迟加载可能是有意义的，通常来说，它可以大大减少加载时间。

有一个不错的模块LimitChunkCountPlugin，可以帮助您检测太小的块并将其合并以减少HTTP开销。

查看这些相关讨论What are module, chunk and bundle in webpack?和https://github.com/webpack/webpack.js.org/issues/970