Webpack 开发者指南

发布于 2022-08-03 23:43:45 字数 1817 浏览 18 评论 0

Webpack 的整个打包流程可以大致分为初始化打包器、解析和加载模块、生成和优化 chunk、生成和输出资源文件这几个过程,然而webpack的官方文档对开发者很不友好。在此,笔者按照专有名词在整个打包流程中出现的顺序人肉总结了一下,希望能有所帮助:

options

  • 顾名思义,webpack的配置信息,由用户定义的配置和webpack提供的默认配置合并之后生成。webpack的处理非常丰富。例如, defaulter中存储 output.path 的方式为this.set('output.path', ''); 此外,options 的每个配置项,实际上是有对应的写入规则来控制其行为的,包括 call、append、undefined 三种,如果是 undefined 类型的规则,则是直接取字面量。
  • options的标准形式是对象。但是options可以给出数组,这样相当于定义了多份打包任务,并且数组可以嵌套。

Tapable

  • webpack定义的一个可以定义插件,以及拥有丰富的插件执行方法的类,继承此类就可以拥有插件功能。
  • webpack中定义的插件一般而言是生命周期钩子。
  • 有人给了个Tapable中文文档

Compiler < Tapable

  • 可以认为是打包的任务单位。数量由options决定,如果有多个互相之间是独立的。compiler把一次打包任务划分成了几个部分: make, seal, emit
  • compiler持有下述对象:
    • resolvers { normal, loader, context }
    • parser
    • compilation
  • compiler在如下阶段有插件点 (this = compiler):
    • entry-option == 用户定义的插件加载完后,供修改entry: (options.context, options.entry)
    • after-plugins == 内建插件初始化结束:(compiler)
    • after-resolvers == resolver加载结束: (resolvers)
    • environment == 将封装过的node fs模块传递给compiler对象之后: (void)
    • after-environment == 紧跟上一个:(void)
    • run == 开始执行,实际上就是记录了一个startTime: async, (compiler)
    • compile ==

NormalModuleFactory, ContextModuleFactory < Tapable

plugin

  • 只要继承了 Tapable,就有插件功能
  • webpack的插件在加载时分内建和用户定义的, 用户的先加载。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

み青杉依旧

暂无简介

0 文章
0 评论
0 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。