webpack

webpack中的module是指什么？

• webpack 支持ESModule, commonJs AMD Assests(image,font, video, audio,json)

1.ESM import export

// package.json type: module -> ESM type: commonjs -> CommonJs

webpack modules,如何表达自己的各种依赖关系？

• ESM import
• CommonJs require
• css/sass/less @import

我们常说的chunk 和 bundle 的区别是什么？

1. chunk
   • chunk 是webpack 打包过程中的modules的集合，是（打包过程中）的概念 webpack的打包是从一个入口模块开始，入口模块应用其他模块，其他模块引用其他模块。。。。

webpack 通过应用关系逐个打包模块，这些module就形成了一个chunk

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

1. bundle 是我们最终输出的一个或者多个打包好的文件

2. chunk 和bundle 的关系是什么？ 大多数情况下，一个chunk会产生一个bundle，但是也有例外 如果加了sourcemap,一个entry,一个chunk产生两个bundle

chunk是过程中的代码块，bundle是打包过程中的代码块，chunk在构建完成就呈现为bundle

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. 输出完成：根据配置，确定要输出的文件名以及文件路径

实现一个自己的打包工具

webpack 本质上，webpack是一个现代js应用程序的静态模块打包器

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

概览

1.找到一个入口文件 2.解析这个入口文件，提取它的依赖 3.解析入口文件的依赖的依赖，递归的去创建一个文件间的依赖图，描述所有文件的依赖关系 4。把所有文件打包成一个文件