澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

澳门在线网址玩转webpack(二):webpack的主导目的

  这里的编写翻译前线指挥部的是始于接触主要的平地风波流this-compilaiton、compilation从前,由于还应该有生机勃勃对预备代码,那意气风发节全体弄出来。

款待大家前往云+社区,获取更加多Tencent海量技艺试行干货哦~

澳门在线网址 1

笔者介绍:陈柏信,Tencent前端开垦,近期主要承当手Q游戏宗旨工作开销,以致项目有关的才能进级、布局优化等职业。

  模块基本上只走布局函数,具体的主意调用的时候再具体批注。

前言

webpack 是多个强盛的模块打包工具,之所以强盛的二个缘由在于它有着灵活、丰盛的插件机制。可是webpack 的文书档案不太对劲儿,就笔者要好的学习经验来讲,官方的文档并不详细,英特网的就学质感又稀少整机的概述和例子。所以,在商讨了意气风发段时间的 webpack 源码之后,自个儿梦想写个类别文章,结合自身的进行一同来谈谈 webpack 插件这些主题,也愿意可以帮忙其余人更康健地打听 webpack。

那篇小说是无穷无尽小说的第二篇,将会从目的的角度来上课 webpack。假使您想从全体角度领悟 webpack,可以先读书浩如沧海文章的首先篇:

  • 玩转webpack(生机勃勃):webpack的大旨架会谈创设流程

P.S. 以下的剖析都遵照 webpack 3.6.0
P.S. 本文将三翻五次套用第风流倜傥篇文章的名词,职务点表示经过 plugin 方法注册的名目

  上黄金时代节NormalModuleFactory模块的布局函数中,在管理完rules后,注入多少个事件流就一病不起了,所以能够回到如下代码:

webpack中的大旨指标

跟第意气风发篇小说相近,我们不会将有所 webpack 中的对象都拿出去解说,而是收拾了一些比较基本的概念。大家得以先看看下边包车型地铁类图:

澳门在线网址 2

上边包车型客车阐述将会挨个叙述类图中的对象,首先大家先来看一下最顶层的类 Tapable。

createNormalModuleFactory() {
    // 构造完成
    const normalModuleFactory = new NormalModuleFactory(this.options.context, this.resolvers, this.options.module || {});
    // 该事件流默认是没有的
    this.applyPlugins("normal-module-factory", normalModuleFactory);
    return normalModuleFactory;
}

Tapable

Tapable 提供了 webpack 中基于任务点的布局底子,它将提供职务点注册的措施甚至触发的艺术。

叁个轻易的例证,使用 plugin 方法来注册一个职务点,然后利用 applyPlugins 方法触发:

澳门在线网址 3

Tapable 里面注册职分点唯有 plugin 方法,可是触发职分点的点子是提供了不菲,能够分为同步和异步实践两类:

联机实施:

  • applyPlugins(name,...params)
  • applyPlugins0(name)
  • applyPlugins1(name,param)
  • applyPlugins2(name,param1,param2)
  • applyPluginsWaterfall(name,init,...params)
  • applyPluginsWaterfall0(name,init)
  • applyPluginsWaterfall1(name,init,param)
  • applyPluginsWaterfall2(name,init,param1,param2)
  • applyPluginsBailResult(name,...params)
  • applyPluginsBailResult0(name)
  • applyPluginsBailResult1(name,param)
  • applyPluginsBailResult2(name,param1,param2)
  • applyPluginsBailResult3(name,param1,param2,param3)
  • applyPluginsBailResult4(name,param1,param2,param3,param4)
  • applyPluginsBailResult5(name,param1,param2,param3,param4,param5)

异步奉行:

  • applyPluginsAsync(name,...params,callback)
  • applyPluginsAsyncSeries(name,...params,callback)
  • applyPluginsAsyncSeries1(name,param,callback)
  • applyPluginsAsyncSeriesBailResult(name,...params,callback)
  • applyPluginsAsyncSeriesBailResult1(name,param,callback)
  • applyPluginsAsyncWaterfall(name,init,...params,callback)
  • applyPluginsParallel(name,...params,callback)
  • applyPluginsParallelBailResult(name,...params,callback)
  • applyPluginsParallelBailResult1(name,param,callback)

纵然上边的措施看起来比非常多,但从函数名就联想到函数的实际上作用:

  • *Waterfall 的方法会将上一个监听器的进行理并了结果传给下一个
  • *BailResult 的不二等秘书诀只会进行到第三个重临结果不为undefined的监听器
  • *Series 的方法会严苛线性来试行异步监听器,独有上一个了却下二个才会初叶
  • *Parallel 的方法会并行试行异步监听器
  • 函数名称最后只要含有数字,那么会依据实际的参数字传送给监听器。假诺有数字,则严刻坚决守护数字来传递参数个数。

最后 Tapable 类还提供了三个措施 apply,它的效益是提供了表面插件注册职务点的联结接口,须求都在 apply 方法内部开展职责点注册逻辑:

澳门在线网址 4

webpack 中自定义插件正是调用 Compiler 实例对象(世袭于 Tapable)的 apply 方法:

澳门在线网址 5

webpack 源码中随处能够见 Tapable 的人影,在打听其职业规律对驾驭源码很有帮带。 Compiler 世袭了 Tapable,同有的时候间也充当营造的输入对象,下边我们来看一下。

  由于并未有对景挂画的平地风波流,所以会再次来到params参数的创设:

Compiler

Compiler 是二个编写翻译器实例,在 webpack 的各种进度中只会成立一个指标,它用来创设创设对象 Compilation,自己须要介意的属性和章程并非众多。上面大家找几个主要的习性来讲一下。

newCompilationParams() {
    const params = {
        // done
        normalModuleFactory: this.createNormalModuleFactory(),
        contextModuleFactory: this.createContextModuleFactory(),
        compilationDependencies: []
    };
    return params;
}

options属性

当 webpack 开首运转时,第后生可畏件事正是解析大家传入的布署,然后将配备赋值给 Compiler 实例:

澳门在线网址 6

据此,我们得以一贯通过这特性格来收获到剖析后的 webpack 配置:

澳门在线网址 7

假设您不满意于官方网址给出的布署文书档案,想要驾驭更加多布置解析,能够看看 WebpackOptionsDefaulter.js 那些文件,这里不再赘言。

  这里的contextModuleFactory模块并不曾此外初阶化好讲的,轻便贴一下代码跳过:

输入输出

Compiler 实例在一方始也会伊始化输入输出,分别是 inputFileSystem 和 outputFileSystem 属性,常常景况下那七个天性都以应和的 nodejs 中扩充后的 fs 对象。可是有点要介意,当 Compiler 实例以 watch情势运营时, outputFileSystem 会被重写成内存输出对象。相当于说,实际上在 watch 情势下,webpack 创设后的文本并不会调换真正的公文,而是保存在内部存款和储蓄器中。

大家能够动用 inputFileSystem 和 outputFileSystem 属性来帮衬大家贯彻部分文本操作,假使您期待自定义插件的有的输入输出游为能够跟 webpack 尽量同步,那么最棒应用 Compiler 提供的那三个变量:

澳门在线网址 8

webpack 的 inputFileSystem 会绝对更头晕目眩一点,它里面得以完结了有的缓存的建制,使得品质效能更加高。即便对那有的风乐趣,可以从那一个NodeEnvironmentPlugin 插件起首看起,它是中间发轫化了 inputFileSystem 和 outputFileSystem:

澳门在线网址 9

createContextModuleFactory() {
    const contextModuleFactory = new ContextModuleFactory(this.resolvers, this.inputFileSystem);
    this.applyPlugins("context-module-factory", contextModuleFactory);
    return contextModuleFactory;
}
class ContextModuleFactory extends Tapable {
    constructor(resolvers) {
        super();
        this.resolvers = resolvers;
    };
    // methods...
}

成立子编写翻译器

在首先篇小说批注 Compilation 实例化的时候,有轻微谈起到制造子编写翻译器的原委:

此处为什么会有 compilation 和 this-compilation 八个职责点?其实是跟子编译器有关, Compiler 实例通过
createChildCompiler 方法能够创造子编写翻译器实例 childCompiler,创设时 childCompiler 会复制
compiler 实例的职务点监听器。任务点 compilation 的监听器会被复制,而职分点 this-compilation
的监听器不会被复制。 越多关于子编写翻译器的开始和结果,将要其余随笔中切磋。

那边大家来留神看一下编译器是怎么创建的, Compiler 实例通过 createChildCompiler 的措施来创建:

澳门在线网址 10

澳门在线网址 11

澳门在线网址 12

地点的代码看起来超多,但实际主要逻辑基本都以在拷贝父编写翻译器的习性到子编写翻译器下面。值得注意的一些是第9行,子编译器在拷贝父编写翻译器的职务点时,会过滤掉 make, compile, emit, after-emit, invalid, done, this-compilation那些任务点。

万后生可畏你读书过先是篇作品(若无,推荐先看一下),应该会知道地点职务点在方方面面营造流程中的地点。从今以往处我们也可以看出来,子编写翻译器跟父编写翻译器的一个差别在于,子编写翻译器并未完整的营造流程。 譬如子编写翻译器没有公文生成阶段( emit职分点卡塔尔国,它的文本生成必需挂靠在父编写翻译器上面来兑现。

除此以外索要留意的是,子编写翻译器的运作入口并不是 run 方法 ,而是有单独的 runAsChild 方法来运作,从代码上边也能够直接看出来,它马上调用了 compile 方法,跳过了 run, make等职务点:

澳门在线网址 13

那么子编写翻译器有啥样成效呢?从上面功用和流程来看,子编写翻译器还是保有完整的模块深入深入分析和chunk生成阶段。相当于说大家可以利用子编写翻译器来单独(于父编写翻译器)跑完二个着力塑造流程,额外生成一些内需的模块可能chunk。

实在部万分表的 webpack 插件正是那般做的,比如常用的插件 html-webpack-plugin 中,便是利用子编写翻译器来单独实现 html 文件的营造,为何不可能一向读取 html 文件?因为 html 文件中或许凭仗别的外界财富(比如 img 的src属性),所以加载 html 文件时仍旧须要一个额外的完全的创设流程来成功这么些义务,子编写翻译器的效率在那就反映出来了:

澳门在线网址 14

在下大器晚成篇小说中大家将亲自贯彻叁个插件,关于子编写翻译器的切实可行进行届期再持续探讨。

  达成了params对象的创设后,会回到compile函数,继续触发其他的平地风波流:

Compilation

接下去我们来看看最重点的 Compilation 对象,在上生龙活虎篇小说中,大家早就表达过部分属性了,比方大家简要回想一下

  • modules 记录了颇负深入分析后的模块
  • chunks 记录了富有chunk
  • assets记录了装有要扭转的公文

上边那多个属性已经包括了 Compilation 对象中山高校部的音讯,可是我们也只是有个差非常少的定义,特别是 modules 中各类模块实例到底是何许东西,大家并不太明了。所以上边包车型客车内容将会相当细地解说。

但万风度翩翩您对那有个别剧情不感兴趣也足以直接跳过,因为能确实使用的现象不会太多,但它能加深对 webpack 创设的知情。

所谓的模块
Compilation 在言之有序进度中,会将解析后的模块记录在 modules 属性中,那么每八个模块实例又是什么样吗?

先是大家先想起一下最起初的类图,大家会意识跟模块相关的类很多,看起来类之间的涉嫌也十三分复杂,但其实只要记住上边包车型地铁公式就很好精晓:

澳门在线网址 15

其意气风发公式的解读是: 八个依据对象(Dependency)经过相应的厂子对象(Factory)创制之后,就可以看到生成对应的模块实例(Module)。

先是什么是 Dependency?本人个人的通晓是,尚未被解析成模块实例的信赖对象。比如大家运转webpack 时传入的输入模块,或然二个模块信赖的其余模块,都会先生成二个Dependency 对象。作为基类的 Dependency 十二分简短,内部唯有叁个 module 属性来记录最后生成的模块实例。不过它的派生类超级多,webpack 中有单独的文本夹( webpack/lib/dependencies)来寄放在全体的派生类,这里的每一个派生类都对应着蓬蓬勃勃种信赖的气象。比方从 CommonJS 中require叁个模块,那么会先生成 CommonJSRequireDependency。

有了 Dependency 之后,怎么着找到相应的厂子对象呢? Dependecy 的每一个派生类在利用前,都会先鲜明相应的厂子对象,比方SingleEntryDependency 对应的厂子对象是 NormalModuleFactory。那么些音讯全部都以记录在 Compilation 对象的 dependencyFactories 属性中,那本性格是 ES6 中的 Map 对象。直接看上面包车型大巴代码大概更易于驾驭:

澳门在线网址 16

澳门在线网址 17

一种工厂对象只会生成生龙活虎种模块,所以不相同的模块实例都会有例外的厂子对象来变化。模块的成形进度我们在率先篇小说有争辩过,无非正是深入分析模块的 request, loaders等新闻然后实例化。

模块对象有啥特点呢?如出后生可畏辙在首先篇随笔中,我们通晓一个模块在实例化之后并不意味构建就一暝不视了,它还应该有一个内部塑造的进程。全部的模块实例都有一个build 方法,那几个法子的效果是带头加载模块源码(并利用loaders),而且经过 js 拆解深入分析器来成功正视剖析。这里要多个点要在乎:

  1. 模块源码最后是保存在 _source 属性中,能够通过 _source.source() 来得到。注意在 build 之前 _source是空头支票的。
  2. js 拆解深入分析器剖判之后会记录全数的模块信赖,这一个信任其实会分为三种,分别记录在 variables, dependencies, blocks属性。模块创设之后的递归创设进度,其实正是读取那多个属性来重新上边的进度:重视=> 工厂 => 模块

大家再来看看那一个模块类,在此以前方的类图看,它们是一而再于 Module 类。那一个类实际上才是大家平常用来跟 chunk 打交道的类对象,它里面有 _chunks 属性来记录后续所在的 chunk 音信,何况提供了多数有关的措施来操作那几个指标: addChunk, removeChunk, isInChunk, mapChunks等。后边大家也寻访到, Chunk 类与之对应。

Module 类往上还有恐怕会一而再于 DependenciesBlock,这些是两全模块的基类,它满含了管理倚重所要求的性质和办法。上边所说的 variables, dependencies, blocks 也是以此基类具有的三个属性。它们分别是:

  • variables 对应必要相应的外表变量,比方 __filename, __dirname, process 等node情况下蓄意的变量
  • dependencies 对应需求解析的别样平时模块,举例 require("./a"卡塔尔(英语:State of Qatar) 中的 a 模块会先生成二个 CommonJSRequireDependency
  • blocks 对应须求解析的代码块(最后会对应成三个 chunk),比如require.ensure("./b"卡塔尔(قطر‎,这里的 b 会生成一个 DependenciesBlock 对象

经过地方的商酌之后,大家着力将 webpack 中于模块相关的靶子、概念都提到到了,剩下还会有模块渲染相关的模版,会在底下描述 Template 时继续斟酌。

Chunk
座谈完 webpack 的模块然后,上面须求验证的是 Chunk 对象。关于 chunk 的生成,在首先篇文章中有涉及,这里不再赘述。 chunk 唯有二个相关类,何况并不复杂。 Chunk 类内部的第风度翩翩质量是 _modules,用来记录蕴含的保有模块对象,并且提供了成都百货上千措施来操作: addModule, removeModule, mapModules 等。 其余有几个章程或许相比实用,这里也列出来:

  • integrate 用来统大器晚成别的chunk
  • split 用来生成新的子 chunk
  • hasRuntime 剖断是或不是是入口 chunk 别的有关 chunk 的剧情,风乐趣的同室可以一直查看源码。

Template
澳门在线网址,Compilation 实例在变化最后文件时,必要将富有的 chunk 渲染(生成代码)出来,这时候供给动用下边几脾本性:

  • mainTemplate 对应 MainTemplate 类,用来渲染入口 chunk
  • chunkTemplate 对应 ChunkTemplate 类,用来传染非入口 chunk
  • moduleTemplate 对应 ModuleTemplate,用来渲染 chunk 中的模块
  • dependencyTemplates 记录每二个信任类对应的模板

在第后生可畏篇小说时,有略略描述过 chunk 渲染的历程,这里再精心地过一回,看看那多少个属性是怎么利用在渲染进程中的:

第风度翩翩 chunk 的渲染入口是 mainTemplate 和 chunkTemplate 的 render 方法。依照 chunk 是或不是是入口 chunk 来区别使用哪三个:

澳门在线网址 18

四个类的 render 方法将扭转分裂的"包装代码", MainTemplate 对应的入口 chunk 须要带有 webpack 的开发银行代码,所以会有局部函数的注脚和开发银行。 那八个类都只承当那一个"包装代码"的变型,包装代码中间的每一个模块代码,是透过调用 renderChunkModules 方法来扭转的。这里的 renderChunkModules 是由他们的基类 Template 类提供,方法会遍历 chunk 中的模块,然后选用ModuleTemplate 来渲染。

澳门在线网址 19

澳门在线网址 20

ModuleTemplate 做的专门的工作跟 MainTemplate 近似,它风姿罗曼蒂克律只是浮动"包装代码"来封装真正的模块代码,而真的的模块代码,是透过模块实例的 source 方法来提供。该方法会先读取 _source 属性,即模块内部构建时接收loaders之后生成的代码,然后利用 dependencyTemplates 来更新模块源码。

dependencyTemplates 是 Compilation 对象的四天性能,它跟 dependencyFactories 同样是个 Map 对象,记录了装有的重视类对应的模板类。

地点用文字来描述那一个进程只怕非常难懂,所以我们直接看其实的例证。比方下边这一个文件:

澳门在线网址 21

compile(callback) {
    const params = this.newCompilationParams();
    // 暂无
    this.applyPluginsAsync("before-compile", params, err => {
        if (err) return callback(err);
        // 暂无
        this.applyPlugins("compile", params);
        const compilation = this.newCompilation(params);
        this.applyPluginsParallel("make", compilation, err => { /**/ });
    });
}

我们来会见使用 webpack 营造后最后的公文:

澳门在线网址 22

澳门在线网址 23

澳门在线网址 24

澳门在线网址 25

内部,从 1-113 行都是 MainTemplate 生成的起步代码,剩余的代码生成如下图所示:

澳门在线网址 26

  但是在卷入中,'before-compile'、'compile'事件流是空的,代码会三回九转上边大器晚成行:

总结

通过那篇文章,大家将 webpack 中的一些宗旨概念和指标都进展了区别档案的次序的座谈,这里再下结论一下他们主要的功能和意义:

  • Tapable 为 webpack 的完全营造流程提供了根底,利用事件机制来分别宏大的创设职分,保险了 webpack 强盛的配备技能。
  • Compiler 对象作为创设入口对象,担任拆解剖析全局的 webpack 配置,再将安顿利用到 Compilation 对象中。
  • Compilation 对象是每壹遍构建的宗旨目的,包涵了壹次营造进度的全部消息。理清楚 Compilation 对象基本的职务点和血脉相近数据,是清楚 webpack 塑造进度的第意气风发。

以上内容,希望能够帮忙我们尤为询问 webpack ,感激大家阅读~

const compilation = this.newCompilation(params);

连锁阅读

玩转webpack(一)上篇:webpack的基本架交涉创设流程
玩转webpack(风姿罗曼蒂克)下篇:webpack的主旨架商谈创设流程
动用神经网络算法的C#手写数字识别


此文已由小编授权云加社区公布,转载请申明小说出处

  那行代码源码如下:

createCompilation() {
    return new Compilation(this);
}

newCompilation(params) {
    // 生成一个Compilation类
    const compilation = this.createCompilation();
    // 空对象{}
    compilation.fileTimestamps = this.fileTimestamps;
    // 空对象{}
    compilation.contextTimestamps = this.contextTimestamps;
    // undefined
    compilation.name = this.name;
    // 空对象{}
    compilation.records = this.records;
    // 空数组[]
    compilation.compilationDependencies = params.compilationDependencies;
    // 编译
    this.applyPlugins("this-compilation", compilation, params);
    this.applyPlugins("compilation", compilation, params);
    return compilation;
}

  除去第意气风发行代码,其他的都以展开品质挂载,在初次打包时都以空的对象或数组,所以功用也看不出,前边再扩充安详严整。

 

Compilation

  剩余的就是Compilation对象的实例化,只过布局函数,源码如下:

class Compilation extends Tapable {
    constructor(compiler) {
        super();
        // 获取配置属性
        this.compiler = compiler;
        this.resolvers = compiler.resolvers;
        this.inputFileSystem = compiler.inputFileSystem;

        const options = this.options = compiler.options;
        this.outputOptions = options && options.output;
        this.bail = options && options.bail;
        this.profile = options && options.profile;
        this.performance = options && options.performance;
        // 引入模板解析模块
        this.mainTemplate = new MainTemplate(this.outputOptions);
        this.chunkTemplate = new ChunkTemplate(this.outputOptions);
        this.hotUpdateChunkTemplate = new HotUpdateChunkTemplate(this.outputOptions);
        this.moduleTemplate = new ModuleTemplate(this.outputOptions);

        this.semaphore = new Semaphore(options.parallelism || 100);

        this.entries = [];
        // ...其余属性初始化
    };
    // methods...
}

  布局函数中任重先生而道远有三块内容:

1、获取配置文件中的一些性质

2、引入模板拆解深入分析的辅助模块

3、初步化别的地点属性

  配置文件的品质获取与开端化当地属性跳过,这里大约过一下多少个扶植模块,分别为:MainTemplate、ChunkTemplate、HotUpdateChunkTemplate、ModuleTemplate,从名字应该能收看效果了呢?

 

MainTemplate

  源码简化如下:

// require function shortcuts:
// __webpack_require__.s = the module id of the entry point
// __webpack_require__.c = the module cache
// __webpack_require__.m = the module functions
// __webpack_require__.p = the bundle public path
// __webpack_require__.i = the identity function used for harmony imports
// __webpack_require__.e = the chunk ensure function
// __webpack_require__.d = the exported propery define getter function
// __webpack_require__.o = Object.prototype.hasOwnProperty.call
// __webpack_require__.n = compatibility get default export
// __webpack_require__.h = the webpack hash
// __webpack_require__.oe = the uncatched error handler for the webpack runtime
// __webpack_require__.nc = the script nonce

class MainTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
        this.plugin("startup", (source, chunk, hash) => { /**/ });
        this.plugin("render", (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) => { /**/ });
        this.plugin("local-vars", (source, chunk, hash) => { /**/ });
        this.plugin("require", (source, chunk, hash) => { /**/ });
        this.plugin("module-obj", (source, chunk, hash, varModuleId) => { /**/ });
        this.plugin("require-extensions", (source, chunk, hash) => { /**/ });
        this.requireFn = "__webpack_require__";
    };
    render(hash, chunk, moduleTemplate, dependencyTemplates) { /**/ }
    renderRequireFunctionForModule(hash, chunk, varModuleId) { /**/ }
    renderAddModule(hash, chunk, varModuleId, varModule) { /**/ }
    renderCurrentHashCode(hash, length) { /**/ }
    entryPointInChildren(chunk) { /**/ }
    getPublicPath(options) { /**/ }
    updateHash(hash) { /**/ }
    updateHashForChunk(hash, chunk) { /**/ }
    useChunkHash(chunk) { /**/ }
};

  注意尾部的笺注,这里表明了包装后文件中模块生成函数__webpack_在线澳门,require__上挨门挨户参数的含义,归于Template的主模块。

  最终的requireFn正是那多少个函数的名字,借使改了打包后文件的名字也会变哦,演示一下:

澳门在线网址 27

  执行一下webpack指令,拜看见打包文件如下:

澳门在线网址 28

  还挺有意思的。

ChunkTemplate

class ChunkTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    };
    render(chunk, moduleTemplate, dependencyTemplates) {/**/};
    updateHash(hash) {/**/};
    updateHashForChunk(hash, chunk) {/**/};
};

HotUpdateChunkTemplate

class HotUpdateChunkTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    };
    render(id, modules, removedModules, hash, moduleTemplate, dependencyTemplates) { /**/ };
    updateHash(hash) { /**/ };
};

ModuleTemplate

class ModuleTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    }
    render(module, dependencyTemplates, chunk) { /**/ }
    updateHash(hash) { /**/ }
};

  那多少个模块都以赞助用,轻便看一下办法有个印象就能够了。

  能够当心到4个模块皆有二个爹,叫做Template。

  那几个模块归于纯工具模块,内部定义了大气的静态方法以便操作字符串,这里讲一下得了,不然那节没啥内容,源码收拾后如下:

"use strict";

const Tapable = require("tapable");
const ConcatSource = require("webpack-sources").ConcatSource;

const START_LOWERCASE_ALPHABET_CODE = "a".charCodeAt(0);
// ...其余常量定义

module.exports = class Template extends Tapable {
    constructor(outputOptions) {
        super();
        this.outputOptions = outputOptions || {};
    };
    static getFunctionContent(fn) { /**/ };
    static toIdentifier(str) { /**/ };
    static toPath(str) { /**/ };
    static numberToIdentifer(n) { /**/ };
    indent(str) { /**/ }
    prefix(str, prefix) { /**/ }
    asString(str) { /**/ }
    getModulesArrayBounds(modules) { /**/ }
    renderChunkModules(chunk, moduleTemplate, dependencyTemplates, prefix) { /**/ }
};
function stringifyIdSortPredicate(a, b) { /**/ }
function moduleIdIsNumber(module) { /**/ }

  内部首要包涵四某些:

1、常量定义

2、静态方法

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:澳门在线网址玩转webpack(二):webpack的主导目的

相关阅读