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

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团队发布了一个有用的(并且很难注意到)词汇表.

我相信关于块和包的混淆是这些术语可以指代相同的东西,但应该在webpack 过程中的不同点使用.

webpack术语表定义

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

块:此Webpack特定术语在内部用于管理捆绑过程.捆绑包由块组成,其中有几种类型(例如入口和子).通常,块直接与输出束相对应,但是,有些配置不会产生一对一的关系.

Bundle:由许多不同的模块生成,bundle包含已经过加载和编译过程的源文件的最终版本.

(我强调的是)

解释

我总结了差异:一个块是webpack进程中的一组模块,一个bundle是一个发出的块或一组块.

谈论的WebPack过程时的区别是非常有用的,因为它们是存在的.由于模块被组合在一起,它们可以发生显着变化(特别是在插件处理过程中),因此在那时调用它们是不准确的,在最终输出中块甚至可能不会作为包发出!然后在webpack完成后,有一个术语来引用所有发出的最终文件(bundle)是很有用的.

你的榜样

所以对你的例子

{
  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

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

资源

• webpack词汇表
• webpack统计数据文档
• 问题970 - 概念 - 捆绑与块

Answer 2

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

如果您不希望将所有代码放入一个巨大的包中,则会将其拆分为多个包,这些包在webpack术语中称为块.在某些情况下,您将自己定义代码的拆分方式(entry指向多个文件和输出文件模板[name].[chunkhash].js),在其他情况下,webpack将为您完成(例如CommonsChunkPlugin).

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