不会还有人不知道module、bundle和chunk的区别吧？

article/2025/8/27 23:49:27

module

非连续的功能块——提供了更小的表面积而不是整个程序。书写良好的modules提供了可靠的抽象及封装边界，组成了统一的设计和清晰的目的；模块解析（ModuleResolution）一个模块可以作为另一个模块的依赖模块，resolver是一个库（libary）用于帮助找不到模块的绝对路径，模块将在resolve.modules中指定的所有目录内搜索。
换句话说就是将一个个js、css拆分成一个个小模块。对于 webpack 来说，项目源码中所有资源（包括 JS、CSS、Image、Font 等等）都属于 module 模块。可以配置指定的 Loader 去处理这些文件。

如图所示：从main.js为入口文件，根据模块的依赖，一个一个的往上找，最后生成bundle。

在这里插入图片描述

下面是webpack与模块化之间的关系：

在这里插入图片描述

chunk

该webpack专业术语用于webpack内部管理bundling的过程中。bundles由许多的chunks组成——这些chunk有不同的类型（比如entry或child）。通常，chunks直接与bundles相对应。然而，有一些配置可以使其不是一对一的关系；

产生chunk的三种途径：

1：entry入口
2：异步加载模块
3：代码分割（code spliting）

1.entry产生Chunk

传递一个字符串

entry: './src/js/main.js',

传递数组

entry: ['./src/js/main.js','./src/js/other.js'],

传递对象

entry: {main: './src/js/main.js',other: './src/js/other.js'
}

2.异步产生Chunk

{entry: {"index": "pages/index.jsx"},output: {filename: "[name].min.js",chunkFilename: "[name].min.js" // 为异步加载的chunk命名}
}
const myModel = r => require.ensure([], () => r(require('./myVue.vue')), 'myModel')

3.代码分割产生Chunk

module.exports = {entry: {main: __dirname + "/app/main.js",other: __dirname + "/app/two.js",},output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "[name].js", //打包后输出文件的文件名chunkFilename: '[name].js',},optimization: {runtimeChunk: "single",splitChunks: {cacheGroups: {commons: {chunks: "initial",minChunks: 2,maxInitialRequests: 5, // The default limit is too small to showcase the effectminSize: 0 // This is example is too small to create commons chunks},vendor: {test: /node_modules/,chunks: "initial",name: "vendor",priority: 10,enforce: true}},}}
}

我们一起看看上面的代码会产生多少个chunk?
答案是5个，两个入口分别产生一个， runtimeChunk: "single"会将Webpack在浏览器端运行时需要的代码单独抽离到一个文件，commons下的配置会产生一个Chunk，vendor下的配置会产生一个Chunk。如下图。
在这里插入图片描述

bundle

由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。
通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个Chunk会生产一个Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool配置成’source-map’。然后只有一个入口文件，也不配置代码分割：

 // webpack配置entry: {main: __dirname + "/app/main.js",},output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "[name].js", //打包后输出文件的文件名},devtool: 'source-map',