阅读 6985

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

export default function add(a, b) {
  return a + b;
}
复制代码

chunk1.js

export default function flow() {
  return "flow";
}
复制代码

common.js

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" // 出口文件
  }
};
复制代码

运行的效果如下

webpack bundle module chunk

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

参考

面试必备!webpack 中那些最易混淆的 5 个知识点

深入理解 Webpack 打包分块(上)

文章分类
前端
文章标签