Webpack

概念

先来看看官方对自己的定义：

节选内容

webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. 官方文档 (opens new window)

翻译

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。中文文档 (opens new window)

人话

把项目中所用到的样式 (css)、脚本 (js)、图片 (png、jpg...) 等等文件打包成一个大大的文件，或者根据需求将该文件切割成多个小体积的文件，也可以进行压缩减小体积。

比如： 一个项目有 60 个 js 文件，20 个 css 文件，20 张图片（其中 5 张特别小的图片）等模块，经过打包后可以生成 1 个 js 文件（含 5 张小图片的 base64URL），1 个 css 文件，以及 15 张图片。这样可以大大减少 http 请求，提高加载速度和用户体验。过程类似下方：

- .js * 60
- .css * 20
- .png(100kb) * 15
- .jpg(1kb) * 5

# webpack

+ .js * 1
+ .css * 1
+ .png * 15

注意

其实打包可以生成多个文件，例子并不严谨，但这样更好理解。

module、chunk、bundle

在了解和使用 webpack 时，会经常和 module、chunk、bundle 这三个名词打交道，在看文档时也会被弄迷糊，其实官方也给出了解释。如下：

节选

• Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.
• Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.
• Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process. 官方文档 (opens new window)

翻译

• Module: Module 是离散功能块，相比于完整程序提供了更小的接触面。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
• Chunk: 此 webpack 特定术语在内部用于管理捆绑过程。输出束（bundle）由块组成，其中有几种类型（例如 entry 和 child ）。通常，块 直接与 输出束 (bundle）相对应，但是，有些配置不会产生一对一的关系。
• Bundle: bundle 由许多不同的模块生成，包含已经经过加载和编译过程的源文件的最终版本。 中文文档 (opens new window)

人话

在写项目引入的文件就是 module，webpack 处理这些文件的时候，这些文件被 webpack 称为 chunk，等打包完成输出出来的文件就是 bundle。再通俗一点就是处理之前的文件是叫 module，处理中的文件叫 chunk，处理完后输出的文件就叫 bundle。类似下方：

# (module)
- .js * 60
- .css * 20
- .png(100kb) * 15
- .jpg(1kb) * 5

# (chunk)
# webpack

# (bundle)
+ .js * 1
+ .css * 1
+ .png * 15