webpack中的bundle、module、chunk分别是什么

祸兮福之所倚,福兮祸之所伏。——老子

简介


bundlemodulechunk 都是 webpack 中的术语,下面就一个一个介绍他们的定义是什么,怎么产生的。

Bundle

Bundle是由多个不同的模块生成,bundles 包含了早已经过加载和编译的最终源文件版本。
Bundle 分离(Bundle Splitting):这个流程提供了一个优化 build 的方法,允许 webpack 为应用程序生成多个 bundle。最终效果是,当其他某些 bundle 的改动时,彼此独立的另一些 bundle 都可以不受到影响,减少需要重新发布的代码量,因此由客户端重新下载并利用浏览器缓存。

Module

模块(Module)提供比较完整程序接触面(surface area)更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
模块解析(Module Resolution)一个模块可以作为另一个模块的依赖模块,resolver 是一个库(libary)用于帮助找不到模块的绝对路径,模块将在resolve.modules中指定的所有目录内搜索。

Chunk

Chunk这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 是由 chunk 组成,其中有几种类型(例如,入口 chunk(entry chunk)和子 chunk(child chunk))。通常 chunk 会直接对应所输出的 bundle,但是有一些配置并不会产生一对一的关系。
代码分离(Code Splitting)指将代码分离到每个 bundles/chunks 里面,你可以按需加载,而不是加载一个包含全部的 bundle。
配置(Configuration)webpack 的配置文件是一个普通的 JavaScript 文件,它导出为一个对象。然后由 webpack 根据这个对象定义的属性进行处理。

Bundle VS Chunk VS Module

我们从定义和时期来说:

  • “模块”(module)的概念大家都比较熟悉,如 CommonJS 模块AMDES6 Modules 模块
  • chunk 表示打包的时候产生得模块,由他来组成 bundle
  • 打包完成的源代码

我们现在就只创建一个能编译jswebpack配置,步骤如下:

  1. 创建一个空文件加,并且在当文件夹中打开 bash or cmd
  2. npm init -y 生成package.json
  3. 如果你安装了cnpm or yarn 就执行 cnpm i webpack webpack-cli -D, 安装webpack的包。
  4. 创建src,在src内部创建chunk0.jschunk1.jscommon.jsindex.jsstyle.css,并且编写内部代码
  5. 在项目根目录创建 webpack.config.js
  6. 直接在cmd中运行 webpack

下面是代码
chunk0.js

1
2
3
export default function add(a, b) {
return a + b;
}

chunk1.js

1
2
3
export default function flow() {
return "flow";
}

common.js

1
2
3
export default function commonJs() {
return "commonJs";
}

index.js

1
2
3
4
import add from "./chunk0.js";
import commonJs from "./common";
console.log(add(1, 2));
console.log(commonJs());

webpack.config.js

1
2
3
4
5
6
7
8
9
10
module.exports = {
mode: "production", // 如果不添加就会警告
entry: {
index: "./src/index.js", // 一个入口文件
chunk1: "./src/chunk1.js" // 两一个入口文件
},
output: {
filename: "[name].bundle.js" // 出口文件
}
};

运行的效果如下
webpack bundle module chunk

通过上面的代码知道,module 就是没有被编译之前的代码,通过 webpack 的根据文件引用关系生成 chunk 文件,webpack 处理好 chunk 文件后,生成运行在浏览器中的代码 bundle

参考

面试必备!webpack 中那些最易混淆的 5 个知识点
深入理解 Webpack 打包分块(上)