你想要的——webpack構建過程分析

Lycheeee 發布于2019-08-21 17:11 / 1082人閱讀

摘要：類定義了方法，用于注冊插件，將插件及其回調函數以的形式保存在內部對象中又定義了，等方法來觸發插件的回調函數。所以當類繼承類后，也同樣具有注冊插件和觸發回調函數的功能。

說起webpack，相信對于前端工程師們而言早已經不是什么新鮮的事物。但是由于webpack有著較為復雜和靈活的配置項，所以給人的第一感覺是難以完全掌握。

這次就跟大家分享一下有關webpack構建過程的相關知識，希望對大家進一步理解webpack有所幫助。

本次分析的對象是webpack(v3.6.0)，這是gayhub地址摸我

由于webpack的內容實在太多，一下子講太多東西容易懵逼，我們這次就從最最最簡單的例子開始講起。

以下是我寫的一個炒雞簡單的例子：

// webpack.config.js

var path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  }
}

假設我們的工作目錄下有一個這樣的webpack.config.js文件，那么當我們執行webpack命令的時候【前提是你已經安裝了webpack】，那么首先會執行的是 /bin 目錄下的webpack.js

OK，作為入口文件，我們首先要分析的就是： /bin/webpack.js

這個文件主要做了以下幾件事：

引入yargs模塊，對命令行參數進行注釋和重命名等工作

添加處理默認參數(比如當我們沒有指定--config參數的時候，默認去找當前目錄下的 webpack.config.js文件作為配置文件)

處理完參數相關的內容之后，就引入lib目錄下的webpack.js文件，得到編譯對象compiler，然后進行編譯（compiler.run()）

var webpack = require("../lib/webpack.js");
...
...
try {
    // 這里的options就是轉換之后的參數，convert-argv文件主要負責這些工作
    // 得到compiler對象
    compiler = webpack(options);
}catch(e) {
    ...
    ...
}
...
...
// 執行編譯
compiler.run(compilerCallback)

由于這里講的例子比較簡單，不涉及到其他參數相關的內容，感興趣的同學可以進一步了解參數處理的部分，這里就不多做解釋了。重點我們還是看一下這個編譯的過程。

作為complier的入口文件，我們接下來看一下： /lib/webpack.js

這個文件首先調用validateSchema方法對傳入的options進行格式校驗

然后又調用了WebpackOptionsDefaulter實例的process方法對options進一步的處理（保存了兩個實例屬性 default={} , config= {},分別往這兩個對象上面掛屬性，然后再掛載到options上）

然后實例化Compiler類，由于這個類繼承自Tapable類，所以他具有父類上實現插件的一套機制（applyPlugin,plugin等方法，后面會具體分析這兩個類），得到compiler對象

然后執行NodeEnvironmentPlugin插件，主要是使用enhanced-resolve模塊修飾compiler對象，注冊“before-run”回調方法

然后調用complier的apply方法，內部其實調用插件的apply方法，相當于注冊各種插件的回調方法

觸發“environment” 和 “after-environment” 回調方法

實例化WebpackOptionsApply類，調用process方法；后面我們會展開分析這個方法

往webpack這個方法上掛一下靜態屬性（各種插件方法）

導出webpack這個方法

接下來我們先分析WebpackOptionsApply類：/lib/WebpackOptionsApply.js

從上面看到，在編譯之前，webpack會先實例化WebpackOptionsApply類，然后調用其process方法
我們看到process方法其實就是注冊了N多個插件，然后觸發了某些插件的回調函數

首先判斷options.target，如果值為“web”的話(這種情況是最常見的，其他情況的邏輯也是類似的)，則注冊插件JsonpTemplatePlugin【注冊“this-compilation”回調】，FunctionModulePlugin【注冊“compilation”回調】，NodeSourcePlugin【注冊“compilation” & “after-resolver”回調】，LoaderTargetPlugin【注冊“compilation”回調】。

注冊插件LibraryTemplatePlugin【注冊“compilation”回調】，ExternalsPlugin【注冊“compile”回調】

注冊插件EntryOptionPlugin【注冊“entry-option”回調】

觸發“entry-option”回調，所以進入了EntryOptionPlugin插件的回調函數

EntryOptionPlugin類中，通過itemToPlugin方法判斷單入口還是多入口文件，這里以單入口為例，所以進入了SingleEntryPlugin類中，注冊插件SingleEntryPlugin【“compilation” & “make”回調】

繼續回到WebpackOptionsApply的process方法，然后又繼續通過compile.apply方法添加插件，插件太多了，不一一列舉，感興趣的可以跟蹤代碼了解詳情

最后觸發“after-plugins” 和 “after-resolvers” 的回調函數

以上就是WebpackOptionsApply實例調用process的全過程

在/bin/webpack中，得到的是/lib/webpack返回的compiler對象，最后調用compiler對象的run方法。

作為編譯過程的核心類，我們接下來看看Compiler這個類：/lib/Compiler.js

我們看到Compiler類繼承自Tapable類 github地址

Tapable類提供了一種調用插件的方式，webpack全部插件都是基于這種方式來注冊和調用的。

Tapable類定義了plugin方法，用于注冊插件，將插件及其回調函數以key-value的形式保存在內部_plugins={}對象中；
又定義了applyPlugins，applyPluginsWaterfall等方法來觸發插件的回調函數。其實就是一個訂閱-發布模式的實現。

所以當Compiler類繼承Tapable類后，也同樣具有注冊插件和觸發回調函數的功能。

接下來看看Compiler中的run方法

首先觸發的“before-run”回調函數，NodeEnvironmentPlugin插件注冊了回調函數

然后觸發“run”回調函數,CachePlugin插件注冊了回調函數

調用readRecords方法()

調用compile方法，進入compile過程

觸發“before-compile”回調函數，DllReferencePlugin注冊了回調函數

觸發“compile”回調函數,ExternalsPlugin & DllReferencePlugin & DelegatedPlugin注冊了回調函數

調用newCompilation方法，創建Compilation實例，這個實例包含了編譯過程的所有屬性和方法

觸發“this-compilation”回調函數

觸發“compilation”回調函數

觸發“make”回調函數

如果是單入口項目，這里就會觸發SingleEntryPlugin插件注冊的“make”回調，其中調用了compilation的addEntry方法進行模塊構建

通過compilation的processModuleDependencies方法收集模塊的依賴

最后通過buildModule方法構建模塊

調用compilation.finish()方法

調用compilation.seal()方法

觸發“after-compile”回調函數

compile方法執行完之后，就執行onCompiled回調

觸發“should-emit”回調函數

觸發“done”回調函數

調用emitAssets方法，觸發了“emit”回調函數

調用emitFiles方法，觸發“after-emit”回調函數

最后執行emitRecords方法

這就是compiler的run方法的主要內容分析

以上就是webpack簡單的構建流程的分析。哈哈今天就分享到這里，希望大家喜歡，祝大家周末愉快啊。。。

云服務器 GPU云服務器數據分析的過程數據分析的基本過程服務器地址的分析過程數據分析知道你

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

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

Webpack實戰 - 使用動態 entry 改善調試體驗

摘要：本文相關代碼已經存放在，可自行下載使用多入口復習的優勢不言而喻，因此在實際應用中我們也常常使用它調試多入口應用，所謂多入口是指多個頁面會使用多個入口文件，在官方教程介紹了如何配置這里指定了個入口文件，打包之后分別會在文件夾中生成個打包之后本文相關代碼已經存放在 dynamic-entry，可自行下載使用 0. 多入口 (復習) webpack 的優勢不言而喻，因此在實際應用中我們也常...

oogh 2019-08-20 13:35 評論0 收藏0
【提高系列】webpack相關知識

摘要：基本配置項基本配置項。的插件架構主要基于實現的，這個就是專注于事件的廣播和操作。開啟多進程，加快打包速度。這次我們主要研究的是webpack框架的相關知識，webpack是一個打包構建的前端框架，用于解決前端開發的模塊化問題。應用場景和縱向比較說到webpack，肯定你還會想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區別呢？我們一起來分析...

DirtyMind 2019-08-22 15:18 評論0 收藏0
用十分之一的構建時間做一場頁面靜態資源依賴分析

摘要：不直接使用的原因很簡單首先構建一次實在太慢了，特別是有幾十個頁面存在的情況下，另一個原因是我只是想拿到資源依賴，我根本不想對整個前端進行一次構建，也不想生成任何。這就達到了本文題目中目的，用十分之一的構建時間做一場頁面靜態資源依賴分析。原文鏈接作者：梯田前言：所謂【靜態資源依賴分析】，指的是可以通過分析頁面資源后，可以以 json 數據或者圖表的方式拿到頁面資源間的依賴關系。比如 c...

B0B0 2019-05-22 11:33 評論0 收藏0
Vue 2019開發者圖譜

摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發者知識圖譜，它包含了所有開發過程中的關鍵部分。在數據展示前端導入導出圖表面板數據綁定等場景無需大量代碼開發和測試，可極大節省企業研發成本并降低交付風險。作為 Vue 的初學者，您或許已經聽過很多關于它的專業術語了，例如：單頁面應用程序、異步組件、服務器端呈現等，您可能還聽過和Vue經常一起被提到的工具和庫，如Vuex、Webp...

cgspine 2019-08-23 18:14 評論0 收藏0
借助webpack對項目進行分析優化

摘要：由于項目的不斷擴大，只會影響我們定位功能和問題的速度，因此對冗余文件進行清理，是很重要的。我們在項目中使用的，自動將各個圖標進行。進入公司之后，接手的便是前人留下來的一個大項目。慶幸的是整個項目擁有完善的產品功能文檔，但是由于項目過于龐大，老舊。包含了打包過慢，冗余文件過多等諸多問題。想要快速的解決這些問題，想要完全把功能重構一遍的話，成本太高了。一個一個文件來過，時間成本也比較大。...

Me_Kun 2019-08-22 16:17 評論0 收藏0