Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack的主要对象 #16

Open
renaesop opened this issue Oct 21, 2016 · 0 comments
Open

webpack的主要对象 #16

renaesop opened this issue Oct 21, 2016 · 0 comments

Comments

@renaesop
Copy link
Owner

webpack里面的对象,只要是单例(或者实例数目只跟option挂钩),都可以定义plugin。

compiler

一般而言,webpack的配置文件是一个对象。但是,webpack的配置文件是可以给出数组的,并且可以嵌套。当给出数组的时候,就定义了多个构建任务了。每个webpack的构建任务对应一个compiler实例,互相之间独立,其执行方式是async.map

自身将处理如下流程:

  • 结合用户和默认配置初始化option
  • 先加载option中定义的插件,再加载内建插件
  • emit过程,负责输出文件

compilation

webpack的编译任务的真正执行者。

自身会处理如下流程:

  • addEntry: 调用方法将entry转化为Dependency并转化为module
  • seal: 实现 modules ==> chunks ==> assets, 过程中会调度plugin执行优化,包括给出hash

xxModule(不支持插件,但compilation上某些插件会在某些方法中被触发)

webpack会有不同的module,不过他们不是根据文件类型分的,而是根据模块所属依赖类型(是否是dll,multiple,normal等)定的。

webpack把 require(ModulePath)中的ModulePath叫做request
自身会处理如下流程:

  • 根据options.module定义的规则和module自身的性质,匹配其loader
  • 调用resovler,基于context和request、loader的路径,获取loader和request的绝对路径
  • 加载loader, 读取request的内容,称为source,并以waterfall的形式让loader处理
  • 如果需要,将loader处理完的source,交给parser(后面有说)处理
  • 将dependencies转化为module
  • module的id为0,则为entry

parser

解析JS文件,并遍历。

自身会这么做:

  • 调用acorn生成ast
  • 遍历ast,其中每个语句都会触发插件,例如 parse.applyPluginBailResult('call commonjs:require:xxx', xxx, xx)。就连require函数添加依赖的功能也是插件完成的。

resolver

顾名思义,将路径转化为绝对路径。
有normalResolver、contextResolver、loaderResolver三种。
contextResolver用于解析contextModule(形如require('a/' + b + '/c')这种)

chunk (不支持插件,但compilation上某些插件会在某些方法中被触发)

可以认为chunk是entry和entry依赖的合集,或者是按需加载的module及其依赖。(如果不考虑优化)

chunkHash是根据chunk的id,name以及包含的module内容生成。

xxTemplate

将chunk生成assets的模板。

做法:

  • 根据chunk类型选择生成的assets的头部(比如说写入commonjs的runtime)
  • 将module当做依赖,结合其id,用函数包裹,添加到到{}

source

包含源码以及其sourceMap。如果xxModule并没有执行parse阶段的话,只会在emit的时候才会去调用source.source方法获取源码。也就是说,source可以是根据compilation、module的元数据生成的,非常强大的特性。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant