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

lemon 發(fā)布于2019-08-23 14:38 / 2505人閱讀

摘要：接下來(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) { 
      //...
  }
  // 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",當(dāng)我們npm run dev的時(shí)候執(zhí)行這段
    package.json的內(nèi)容 此時(shí)有config讀取webpack.config.js的內(nèi)容 當(dāng)我們npm run build時(shí) 執(zhí)行 "webpack" 此時(shí)沒有config走else分支*/
    if (argv.config) {
        // ... 獲取文件
    }else{
        /*讀取默認(rèn)配置 ts co 等后綴類
         defaultConfigFiles是 數(shù)組[{ 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推進(jìn)去
            if (fs.existsSync(webpackConfig)) {
                configFiles.push({
                    path: webpackConfig,
                    ext: defaultConfigFiles[i].ext
                });
                //     最終結(jié)果configFiles is the Array [ { path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
                //  ext: ".js" } ]
                break;
            }
        
        }
    }

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

//configFiles長(zhǎng)度大于0時(shí)
if (configFiles.length > 0) {
    // ...
    const requireConfig = function requireConfig(configPath) {
        // 這是局部options不要和全局的options數(shù)組混淆
        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 {
                // 讀取路徑下的文件內(nèi)容返回
                return require(configPath);
            }
        })();
        // 預(yù)處理options，options若是數(shù)組的話，處理成對(duì)象之類的
        options = prepareOptions(options, argv);
        return options;
    };
    configFiles.forEach(function(file) {
            /// interpret.extensions[.js]為null
            // 這里直接跳出
            registerCompiler(interpret.extensions[file.ext]);
            // options這里是全局options空數(shù)組 
            options.push(requireConfig(file.path));
        });
        // configFileLoaded 加載完畢
        configFileLoaded = true;
     }

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

注意了，這里有一個(gè)return 也就是這個(gè)convert-argv模塊的最終返回結(jié)果，函數(shù)到這里就結(jié)束了。接下來(lái)我看看一下processConfiguredOptions函數(shù)

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