Skip to main content

webpack

前置知识​

  • 基础使用。比如怎么做项目的 webpack 配置、或从 0 搭建一个 vue 项目等
  • 名词解释
    • Compiler
    • Compilation
    • Module
    • ModuleGraph
    • Chunk
  • Tapable
  • devServer 运行
  • 打包文件分析
    • IIFE
    • require
    • webpackModules

构建流程​

  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%的 bundle-size，不过实际项目中并没有体会到这个变化
  • 更严格的代码检查。这个也是造成很多 webpack4 项目在升级后突然在运行时报错的原因，会导致页面 crash
  • 确定的 moduleId/chunkId
  • Node Polyfill 脚本被移除
  • 原生 worker 支持。可以参考 react 项目中使用 web worker 里面有提及 webpack5 下如何使用 web worker

一些原理​

持久化缓存​

将首次构建出的 Module、Chunk、ModuleGraph 等对象序列化后缓存到硬盘中

缓存节点

  • module resolve
  • module build
  • 代码生成
  • sourceMap

参考 https://github.com/CommanderXL/Biu-blog/issues/55

缓存清理策略，类似于 LRU

webpack 是如何做 tree shaking 的​

基于 ES 模块（依赖 ES6 的静态语法: import 和 export），在生成模块依赖关系后，遍历标记哪些模块没被用到，然后清理掉对应的代码

不适用于 class、commonjs 模块

sideEffects 可以用来标识带有副作用的模块