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

AaronYuan 發布于2019-08-23 14:49 / 3524人閱讀

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

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

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

進入 WebpackOptionsApply.js 這個大坑

進入這個頁面看到前面一大堆的模塊引入，已經給跪了，但是馬馬虎虎的完成也比放棄好

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

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

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

1.處理options.target參數

2.處理options.output，options.externals，options.devtool參數

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

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事件流

終極總結

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

沒有對options做任何處理

過！！！

云服務器 GPU云服務器源碼淺析源碼中文說明之 WebpackOptionsApply 源碼編譯模塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101199.html

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

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

PumpkinDylan 2019-08-23 14:50 評論0 收藏0
淺析webpack源碼之入口函數webpack.js詳解（四）

摘要：我們看到引入了對進行分析是一個很大的文件，里面規定了我們隨便看一段這是對你輸入的規定的要求是是其實就是本下的這樣寫可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進入函數引入引入了，我們在搜索鏈接我們看到，在文檔里這樣的描述的用法我們看到引入了對webpack.js const validateSchema = require(./validateSchema); con...

zone 2019-08-23 14:45 評論0 收藏0
webpack 源碼分析（四）——complier模塊

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

tianlai 2019-08-26 18:42 評論0 收藏0
你想要的——webpack構建過程分析

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

Lycheeee 2019-08-21 17:11 評論0 收藏0
淺析webpack源碼之convert-argv模塊（二）

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

lemon 2019-08-23 14:38 評論0 收藏0