1. 程式人生 > >.5-淺析webpack源碼之入口函數

.5-淺析webpack源碼之入口函數

sso ack 對象 步驟 pan isa 直接 nbsp name

  從convert-argv出來後,目前進度在這:

yargs.parse(process.argv.slice(2), (err, argv, output) => {
    // ...

    // 從這裏出來
    var options = require("./convert-argv")(yargs, argv);

    // 跟convert-argv中的一樣
    function ifArg(name, fn, init) { /* ... */ }

    // 傳入返回的options
    function processOptions(options) {
        
// ... // 這是個嘛??? var outputOptions = options.stats; // 大量的ifArg命令處理outputOptions屬性 // 獲取webpack主函數 var webpack = require("../lib/webpack.js"); Error.stackTraceLimit = 30; var lastHash = null; var compiler; try { // 進入主函數
compiler = webpack(options); } catch(err) { /* ... */ } // ...編譯後回調 } // 執行上面的函數 processOptions(options); });

  聲明了一個熟悉的ifArg函數後進入了processOptions函數,接下來是根據一些命名參數處理那個outputOptions屬性,我怎麽都找不到這個在哪裏定義的,知道的人提醒一下。

  因此,直接進入webpack主函數,傳入返回的options對象作為參數。

webpack主函數

GO!

  先給一張流程圖總覽:

  技術分享圖片

  主函數簡化後源碼如下:

const Compiler = require("./Compiler");
// ...模塊引入

function webpack(options, callback) {
    // 錯誤檢測
    const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options);
    if(webpackOptionsValidationErrors.length) {
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
    }
    let compiler;
    // 多配置
    if(Array.isArray(options)) {
        compiler = new MultiCompiler(options.map(options => webpack(options)));
    }
    // 單配置 
    else if(typeof options === "object") { /*...*/ } 
    else {
        throw new Error("Invalid argument: options");
    }
    if(callback) { /*...*/ }
    return compiler;
}
exports = module.exports = webpack;

webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;
// ...屬性掛載

function exportPlugins( /*...*/ )

exportPlugins( /*...*/ );
exportPlugins( /*...*/ );

  可以主要分為以下幾塊:

1、工具模塊引入

2、對配置對象進行錯誤檢測

3、分多配置或單配置進行處理

4、執行回調函數

5、在webpack函數上掛載引入的模塊

6、輸出一些插件

  

  引入的模塊在用到的時候再講,如果特別復雜的情形會盡量進行簡化,不重要的地方也會適當跳過。

  基本上會按照步驟來講解。

.5-淺析webpack源碼之入口函數