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

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

简介

bundle、module、chunk 都是 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 模块、AMD、ES6 Modules 模块
chunk 表示打包的时候产生得模块，由他来组成 bundle
打包完成的源代码

我们现在就只创建一个能编译js的webpack配置，步骤如下：

创建一个空文件加，并且在当文件夹中打开 bash or cmd。
npm init -y 生成package.json。
如果你安装了cnpm or yarn 就执行 cnpm i webpack webpack-cli -D, 安装webpack的包。
创建src，在src内部创建chunk0.js、chunk1.js、common.js、index.js、style.css，并且编写内部代码
在项目根目录创建 webpack.config.js
直接在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

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

webpack.config.js

module.exports = {
  mode: 'production', // 如果不添加就会警告
  entry: {
    index: './src/index.js', // 一个入口文件
    chunk1: './src/chunk1.js' // 两一个入口文件
  },
  output: {
    filename: '[name].bundle.js' // 出口文件
  }
};

运行的效果如下

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

简介

Bundle

Module

Chunk

Bundle VS Chunk VS Module

参考