webpack 的作用是将源代码编译 （构建、打包） 成最终代码，整个过程大致分为三个步骤：

  1. 初始化
  2. 编译
  3. 输出

初始化

  1. 此阶段 webpack 会将 CLI参数、配置文件、默认配置 进行融合，形成一个最终的配置对象；

    1. 对配置的处理过程是依托一个第三方库 yargs 完成的；
    2. 此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备；

  2. 目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置；

编译

创建 chunk

  1. chunk 是 webpack 在内部构建过程中的一个概念，译为 块，它表示通过某个入口找到的所有依赖的统称；

  2. 根据入口模块 （默认为 ./src/index.js） 创建一个 chunk

  3. 每个 chunk 都有至少两个属性：

    1. name：默认为 main；
    2. id：唯一编号，开发环境和 name 相同，生产环境是一个数字，从 0 开始；

构建所有依赖模块

AST 在线测试工具

  1. 详细图解

  2. 简图

产生 chunk assets

  1. 在第二步完成后，chunk 中会产生一个模块列表，列表中包含了 模块id 和 模块转换后的代码；

  2. 接下来 webpack 会根据配置为 chunk 生成一个资源列表 即 chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容；

  3. 简图

合并 chunk assets

  1. chunk hash 是根据所有 chunk assets 的内容生成的一个 hash 字符串；

  2. hash 算法 具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的 hash 字符串就不变；

输出

此步骤非常简单，webpack 将利用 node 中的 fs 模块（文件处理模块），根据编译产生的总的 assets 生成相应的文件

总过程

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 初始化
  2. 2. 编译
    1. 2.1. 创建 chunk
    2. 2.2. 构建所有依赖模块
    3. 2.3. 产生 chunk assets
    4. 2.4. 合并 chunk assets
  3. 3. 输出
  4. 4. 总过程