.5-淺析webpack源碼之入口函數
阿新 • • 發佈:2017-12-13
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源碼之入口函數