webpack-构建流程

构建流程

1. 初始化配置
2. 实例化一个 Compiler 类，注册所有的插件 plugin，给对应的 Webpack 的生命周期绑定 hooks
3. 开始编译：执行 Compiler 类的 run 方法开始构建
4. 实例化一个 Compilation 类，Compilation 是做构建打包的事情，主要做以下几件事：
   • 查找和分析入口 entry
   • 使用 loader 处理指定文件
   • 解析文件的 AST 语法树
   • 找出文件依赖关系（arcon）
   • 递归编译依赖的模块
5. 递归完后得到每个文件的最终结果，根据 entry 生成代码块 chunk
6. 输出

整体流程：init >> make >> seal

webpack 5 带来了什么

• 持久化缓存。webpack4 需要通过 cache-loader/hardSourcePlugin 来实现中间缓存，webpack5 相当于内置了这部分功能
• 更好的 hash 算法。hash—>fullhash，比如 webpack 4 如果添加空白、注释或修改变量名是会影响 contenthash 值的计算，webpack5 则不会影响，从而能继续使用缓存，这个方式降低了缓存的失效率，间接加快了应用 rebuild 的速度
• Asset Modules（更优雅的资源模块）。指的是图片和字体等这一类型文件模块，它们无须使用额外的预处理插件
• 模块联邦。实现应用级的模块复用，这个是现在蛮多新兴微前端框架的基础
• tree-shaking 改进。据说可以减少约 30%