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

lemon 發布于2019-08-23 14:38 / 2496人閱讀

摘要：接下來我看看一下函數我們先按照分支走為讀取是里的對象，饒了這大的一個圈子，那么接下來一起來看一看對你的輸入配置做了怎么樣的處理吧

打開webpeck-cli下的convert-argv.js文件

// 定義options為空數組
 const options = [];
 // webpack -d 檢查 -d指令
  if (argv.d) { 
      //...
  }
  // webpack -p
  if (argv.p) {
      //...
  }
  if (argv.output) {
      //...
  }
   //...
   /*如果有 --config   --config webpack.config.js   config就是webpack.config.js
    可以這樣理解 
    "dev": "webpack-dev-server --inline --progress --hot --config webpack.config.js",當我們npm run dev的時候執行這段
    package.json的內容 此時有config讀取webpack.config.js的內容 當我們npm run build時 執行 "webpack" 此時沒有config走else分支*/
    if (argv.config) {
        // ... 獲取文件
    }else{
        /*讀取默認配置 ts co 等后綴類
         defaultConfigFiles是 數組[{ path:
         "/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
         ext: ".js"
         },{path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.ts", ext: ".ts"},{},...] */
        for (i = 0; i < defaultConfigFiles.length; i++) {
            const webpackConfig = defaultConfigFiles[i].path;
            // 讀取文件,如果有的話push推進去
            if (fs.existsSync(webpackConfig)) {
                configFiles.push({
                    path: webpackConfig,
                    ext: defaultConfigFiles[i].ext
                });
                //     最終結果configFiles is the Array [ { path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
                //  ext: ".js" } ]
                break;
            }
        
        }
    }

process.cwd() 是node.js里讀取文件路徑的一個API

//configFiles長度大于0時
if (configFiles.length > 0) {
    // ...
    const requireConfig = function requireConfig(configPath) {
        // 這是局部options不要和全局的options數組混淆
        let options = (function WEBPACK_OPTIONS() {
            if (argv.configRegister && argv.configRegister.length) {
                module.paths.unshift(
                    path.resolve(process.cwd(), "node_modules"),
                    process.cwd()
                );
                argv.configRegister.forEach(dep => {
                    require(dep);
                });
                return require(configPath);
            } else {
                // 讀取路徑下的文件內容返回
                return require(configPath);
            }
        })();
        // 預處理options，options若是數組的話，處理成對象之類的
        options = prepareOptions(options, argv);
        return options;
    };
    configFiles.forEach(function(file) {
            /// interpret.extensions[.js]為null
            // 這里直接跳出
            registerCompiler(interpret.extensions[file.ext]);
            // options這里是全局options空數組 
            options.push(requireConfig(file.path));
        });
        // configFileLoaded 加載完畢
        configFileLoaded = true;
     }

     // 如果沒有加載完畢，調用函數傳遞空數組
    if (!configFileLoaded) {
        return processConfiguredOptions({});
    } else if (options.length === 1) {
       // 如果只有一個，把僅有的傳進去 
        return processConfiguredOptions(options[0]);
    } else {
        // 傳options
        return processConfiguredOptions(options);
    }

注意了，這里有一個return 也就是這個convert-argv模塊的最終返回結果，函數到這里就結束了。接下來我看看一下processConfiguredOptions函數

我們先按照npm run build分支走options.length為1,讀取options[0]是webpack.config.js里的module.exports ={} 對象，饒了這大的一個圈子，那么接下來一起來看一看對你的輸入配置做了怎么樣的處理吧

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

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

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

淺析webpack源碼之前言（一）

為什么讀webpack源碼因為前端框架離不開webpack，天天都在用的東西啊，怎能不研究讀源碼能學到很多做項目看書學不到的東西，比如說架構，構造函數，es6很邊緣的用法，甚至給函數命名也會潛移默化的影響等想寫源碼，不看源碼怎么行，雖然現在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧知道世界的廣闊，那么多插件，那么多軟件開發師，他們在做什么，同樣是寫js的，怎么他們能這么偉大好奇...

suosuopuo 2019-08-23 14:49 評論0 收藏0
webpack源碼之運行流程

摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個階段下面開始分析初始化這個階段整體流程做了什么啟動構建，讀取與合并配置參數，加載，實例化。推薦源碼之源碼之機制源碼之簡介源碼之機制參考源碼引言通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個階段,下面開始分析初始化這個階段整體流程做了什么? 啟動構建，讀...

kviccn 2019-08-22 16:04 評論0 收藏0
淺析webpack源碼之processOptions處理Options以及入口函數（三）

摘要：我們打開根據上次所返回的這個因為有了上次的基礎，比較容易讀了大體邏輯是這樣的先定義一個空對象同上次的一個邏輯，還是一個目前的方式只有一個滿足如果滿足的會執行一系列函數這個函數直接結果是的影響是打比如如果滿足的話當你的時候就會在頁面上出我們打開bin/cli.js根據上次所返回的Options processOptions(options)這個因為有了上次的基礎，比較容易讀了,大體邏輯...

doodlewind 2019-08-23 14:45 評論0 收藏0
淺析webpack源碼之WebpackOptionsApply 模塊(七)

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

AaronYuan 2019-08-23 14:49 評論0 收藏0
淺析webpack源碼之NodeEnvironmentPlugin模塊總覽（六）

摘要：進入傳入地址出來一個復雜對象把掛載到對象上太復雜我們先看可以緩存輸入的文件系統輸入文件系統輸出文件系統，掛載到對象傳入輸入文件，監視文件系統，掛載到對象添加事件流打開插件讀取目錄下文件對文件名進行格式化異步讀取目錄下文件同步方法就進入webpack.js //傳入地址,new Compiler出來一個復雜對象 compiler = new Compiler(options.conte...

ChristmasBoy 2019-08-23 14:49 評論0 收藏0