webpack 源码阅读笔记 大纲 - qianlongdoit/webpack GitHub Wiki

前言

因为发现webpack本地打包和CI机器打包出来的hash值不一样，一番探究发现hash值的生成与项目的绝对路径相关。故而想弄清楚webpack的hash的生成的流程

webpack 结构解读

  1. compiler

  2. compilation

  3. hash

  4. assets

  5. chunk 待补充

  6. module 待补充

    compiler

    主要负责整个项目的编译，包含编译过程中的整个生命周期。

    规定了 hooks 以及 compilation执行的顺序。

    创建compilation实例。

    比如解析entryPoint、run、watchRun、compile、emit、done等生命周期函数。

    上面有注册各种周期函数供plugin在各个阶段调用。

    源码中可以通过搜索hooks.<hook name>.call来查看在什么时候调用的。

    compilation

    模块被编译的时候会用到。执行者。

    上面挂载有一些重要的属性 modules、assets、chunks。

    hash

    基础的hash class，用来更新hash和计算hashDigest

    updateHash: 更新hash.buffer

    digest: 生成hash摘要

    assets

    生成最后的输出资源文件，大致结构如下:

    {
    [filerPath]: source, // 原型为node_modules里面的webpack-source里面的source类
}

    在compilation 里面会 creatAssets、updateAssets、emitAsset。

    最后在 compiler.run 的最后阶段通过 compiler.emitAssets 依据 assets里面的信息输出最终的打包文件。

⚠️ **GitHub.com Fallback** ⚠️