成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

淺析webpack源碼之WebpackOptionsApply 模塊(七)

AaronYuan / 3584人閱讀

摘要：還做了處理，是之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個(gè)坑跳出來(lái)進(jìn)入這個(gè)大坑進(jìn)入這個(gè)頁(yè)面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好前面一大堆的引入，主要是下和文件夾下的模塊父類就只是定義了接口主要核心在方法

NodeEnvironmentPlugin還做了watch處理，NodeWatchFileSystem是webpack之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個(gè)坑跳出來(lái)

compiler.options = new WebpackOptionsApply().process(options, compiler);

進(jìn)入 WebpackOptionsApply.js 這個(gè)大坑

進(jìn)入這個(gè)頁(yè)面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好

前面一大堆的引入，主要是lib下dependencies和optimize文件夾下的模塊

class WebpackOptionsApply extends OptionsApply {
    constructor() {
        super();
    }
    process(options, compiler) {
        
    }
}

OptionsApply父類就只是定義了接口
主要核心在process方法里主要做了

1.處理options.target參數(shù)

2.處理options.output，options.externals，options.devtool參數(shù)

3.對(duì)于引用了巨量的模塊把把this指向compiler對(duì)象

new CompatibilityPlugin().apply(compiler);
new HarmonyModulesPlugin(options.module).apply(compiler);
new AMDPlugin(options.module, options.amd || {}).apply(compiler);
new CommonJsPlugin(options.module).apply(compiler);
new LoaderPlugin().apply(compiler);
new NodeStuffPlugin(options.node).apply(compiler);
//...

4.處理options.optimization 的moduleIds和chunkIds屬性

5.處理如下插件

new TemplatedPathPlugin().apply(compiler);

new RecordIdsPlugin({
    portableIds: options.optimization.portableRecords
}).apply(compiler);

new WarnCaseSensitiveModulesPlugin().apply(compiler);

6.hooks事件流

終極總結(jié)

這個(gè)模塊主要是根據(jù)options選項(xiàng)的配置，設(shè)置compile的相應(yīng)的插件，屬性，里面寫了大量的 apply(compiler); 使得模塊的this指向compiler

沒(méi)有對(duì)options做任何處理

過(guò)?。。?/p>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101199.html

相關(guān)文章

  • 淺析webpack源碼之Compiler.js模塊(八)

    摘要：小尾巴最終返回了屬性掛載把引入的函數(shù)模塊全部暴露出來(lái)下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對(duì)象上的正題要想理解必須要理解再寫一遍地址我們先簡(jiǎn)單的理解它為一個(gè)通過(guò)注冊(cè)插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

    PumpkinDylan 評(píng)論0 收藏0

  • 淺析webpack源碼之入口函數(shù)webpack.js詳解（四）

    摘要：我們看到引入了對(duì)進(jìn)行分析是一個(gè)很大的文件，里面規(guī)定了我們隨便看一段這是對(duì)你輸入的規(guī)定的要求是是其實(shí)就是本下的這樣寫可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進(jìn)入函數(shù)引入引入了，我們?cè)谒阉麈溄游覀兛吹剑谖臋n里這樣的描述的用法 我們看到引入了 對(duì)webpack.js const validateSchema = require(./validateSchema); con...

    zone 評(píng)論0 收藏0

  • webpack 源碼分析（四）——complier模塊

    摘要：源碼分析四模塊上一篇我們看到，通過(guò)對(duì)命令行傳入的參數(shù)和配置文件里的配置項(xiàng)做了轉(zhuǎn)換包裝，然后傳遞給的模塊去編譯。這一篇我們來(lái)看看做了些什么事。在上面的分析中，我們看到最核心的其實(shí)就是實(shí)例，接下來(lái)我們就看下它的類的內(nèi)部邏輯。 webpack 源碼分析（四）——complier模塊 上一篇我們看到，webpack-cli 通過(guò) `yargs 對(duì)命令行傳入的參數(shù)和配置文件里的配置項(xiàng)做了轉(zhuǎn)換包裝...

    tianlai 評(píng)論0 收藏0

  • 你想要的——webpack構(gòu)建過(guò)程分析

    摘要：類定義了方法，用于注冊(cè)插件，將插件及其回調(diào)函數(shù)以的形式保存在內(nèi)部對(duì)象中又定義了，等方法來(lái)觸發(fā)插件的回調(diào)函數(shù)。所以當(dāng)類繼承類后，也同樣具有注冊(cè)插件和觸發(fā)回調(diào)函數(shù)的功能。 說(shuō)起webpack，相信對(duì)于前端工程師們而言早已經(jīng)不是什么新鮮的事物。但是由于webpack有著較為復(fù)雜和靈活的配置項(xiàng)，所以給人的第一感覺是難以完全掌握。 這次就跟大家分享一下有關(guān)webpack構(gòu)建過(guò)程的相關(guān)知識(shí)，希望對(duì)...

    Lycheeee 評(píng)論0 收藏0

  • 淺析webpack源碼之convert-argv模塊（二）

    摘要：接下來(lái)我看看一下函數(shù)我們先按照分支走為讀取是里的對(duì)象，饒了這大的一個(gè)圈子，那么接下來(lái)一起來(lái)看一看對(duì)你的輸入配置做了怎么樣的處理吧 打開webpeck-cli下的convert-argv.js文件 // 定義options為空數(shù)組 const options = []; // webpack -d 檢查 -d指令 if (argv.d) { //... } ...

    lemon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<