webpack

Module/Chunk/bundle

webpack 不同阶段的产物

初始化阶段 -> 构建阶段 -> 生成阶段

1. 初始化阶段 ， 读取配置合并参数，实例编译器，遍历入口文件
2. 构建阶段 ， 读取入口文件，调用loader转译成js，ast分析依赖，找出依赖构建 module和moudle 之间依赖关系
3. 生成阶段 ， 根据entry配置和依赖关系将module组装成一个个chunk，输出文件系统
   …

拆包原理

三种 chunk

1. entry Chunk
   根据入口文件配置
2. async Chunk
   根据动态代码单独组织成chunk
3. runtime Chunk

分包规则问题

1. 无法解决模块重复

多个 chunk 同时包含同一个 Module ， Module会不受限制打包到不同 Chunk 中，造成代码重复

可用 SplitChunk