Webpack学习笔记

Webpack

Webpack 是一个现代 js 应用程序的静态模块打包器

当 webpack 处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle

1. Webpack 中的 module 是什么？

Webpack 支持 ESModule，CommonJS，AMD，Assets（image，font，video，audio，json）

1. ESModule

关键字：export，import

import { a } from './a.js';

export { b };

// package.json

type: module -> ESModule
type: commonjs -> CommonJS

2. CommonJS

关键字：module.exports，require

webpack modules 如何表达各种依赖关系

• ESModule import
• CommonJs require
• AMD define require
• css/sass/less @import

2. Webpack 中的 chunk 和 bundle 的区别？

1. Chunk

Chunk 是 webpack 打包过程中 modules 的集合，是（打包过程中）的概念

Webpack 的打包是从一个入口模块开始，入口模块引用其他模块，其他模块引用… …
Webpack 通过引用关系逐个打包，这些 module 就形成一个 chunk

如果有多个入口模块，可能会产出多条打包路径，每条路径都会形成一个 chunk

2. Bundle

Webpack 最终输出的一个或多个打包好的文件

Chunk 和 Bundle 的关系是什么？

大多数情况下，一个 chunk 会生成一个 bundle
但是如果加了 sourcemap，一个 entry，一个 chunk 对应两个 bundle

Chunk 是过程中代码块，Bundle 是打包结果输出的代码块，Chunk 在构建完成就呈现为 Bundle

3. Plugin 和 Loader 分别是做什么的？怎么工作的？

1. Loader

模块转换器，将非 js 模块转化为 webpack 能够识别的 js 模块

本质上，webpack loader 将所有类型的文件，转换为应用程序的 依赖图 可以直接引用的模块

2. Plugin

扩展插件，webpack 运行的各个阶段，都会广播出对应的事件，插件去监听对应的事件

3. Compiler

对象，包含了 webpack 环境的所有配置信息，包括 options，loader，plugins
Webpack 启动的时候实例化，在全局是唯一的，可以理解为 webpack 的实例

4. Compliation

包含了当前的模块资源，编译生成资源
Webpack 在开发模式下运行的时候，每当检测到一个文件变化，就会创建一次新的 Compliation

简单描述一下 webpack 的打包过程？

1. 初始化参数: shell webpack.config.js
2. 开始编译: 初始化一个 Compiler 对象，加载所有的配置，开始执行编译
3. 确定入口: 根据 entry 中的配置 ，找出所有的入口文件
4. 编译模块: 从入口文件开始，调用所有的 loader ，再去递归的找依赖
5. 完成模块编译: 得到每个模块编译后的最终内容以及他们之间的依赖关系
6. 输出资源: 根据得到的依赖关系，组装成一个个包含多个 module 的 chunk
7. 输出完成: 根据 output 中的配置，确定输出的文件名和文件路径