Webpack 是如何實現(xiàn)打包的？以下這篇文章就來帶大家深入了解Webpack 打包原理，希望對大家有幫助！

作為一個前端“攻城獅”，Webpack 再熟悉不過了，Webpack 能做的事太多了，可以將所有資源（包括JS，TS，JSX ，圖像，字體和CSS 等）打包後置於依賴關係中，使你可以按照需求引用依賴來使用資源。 Webpack 很出色的完成了轉譯前端多種文件資源，分析複雜模組依賴的工作，並且我們還可以自定義 loader，自由的加載我們自己的資源，那 Webpack 是如何實現(xiàn)打包的呢？ 今天來我們一起來看下。

想要知道 Webpack 打包原理的我們需要事先知道兩個知識點

1、什麼是 require？

說到require 首先想到的可能就是import，import 是es6 的一個語法標準,

– require 是運行時調用，因此require 理論上可以運用在程式碼的任何地方；

– import 是編譯時調用，因此必須放在檔案開頭；

在我們使用Webpack 進行編譯的時候會使用babel 把import 轉譯成require，在CommonJS 中，有一個全域性方法require()，用來載入模組, AMD、CMD 也採用的require 方式來引用。

例如：

var?add?=?require('./a.js');
add(1,2)

簡單看來 require 其實就是函數(shù)，引用的 ./a.js 只是函數(shù)的參數(shù)。

2、什麼是 exports？

在這裡我們可以認為 exports 是一個對象，MDN export 可以看下具體用法。

了解了require 和 exports，接下來我們就可以開始打包

我們先看看下面我們打包後的程式碼結構，我們可以發(fā)現(xiàn)經(jīng)過打包後會出現(xiàn) require 和 exports。

並不是所有的瀏覽器都能執(zhí)行 require exports，必須自己去實作一下 require 和 exports 才能確保程式碼的正常運作。打包後的程式碼就是一個自執(zhí)行函數(shù)，參數(shù)有依賴訊息，以及檔案的 code，執(zhí)行的函數(shù)體透過 eval 執(zhí)行 code。

整體設計圖如下：

#第一步：編寫我們的設定文件

設定檔中設定了我們打包的入口entry 以及打包後的出口output 為後面的產生檔案做好準備。

const?path?=?require("path");
module.exports?=?{
??entry:?"./src/index.js",
??output:?{
????path:?path.resolve(__dirname,?"./dist"),//打包后輸出的文件地址，需要絕對路徑因此需要path
????filename:"main.js"
??},
??mode:"development"

第二步：模組分析

#整體想法：可以總結來說就是利用fs 檔案讀取入口檔案透過AST 取得到import 依賴的檔案的路徑，如果依賴檔案依然有依賴一直遞歸下去直到依賴分析清楚，維護在一個map 裡面。

細節(jié)拆解：有人會有疑惑為什麼用AST 因為AST 天生有這個功能，它的ImportDeclaration 能幫我們快速過濾出import 語法，當然用正則匹配也是可以的，畢竟檔案讀取完就是一個字串，透過寫牛逼的正規(guī)獲取檔案依賴路徑，但不夠elegant。

step1：新index.js，a.js，b.js 依賴關係如下

index.js檔案

import?{?str?}?from?"./a.js";
console.log(`${str}?Webpack`)

a.js文件

import?{?b}?from?"./b.js"
export?const?str?=?"hello"

b.js 檔案

export?const?b="bbb"

step2：寫Webpack

模組分析：利用AST 的@babel/parser將檔案讀取的字串轉換成AST 樹，@babel/traverse 進行語法分析，利用ImportDeclaration 過濾出import 找出檔案依賴。

????const?content?=?fs.readFileSync(entryFile,?"utf-8");
????const?ast?=?parser.parse(content,?{?sourceType:?"module"?});
??
????const?dirname?=?path.dirname(entryFile);
????const?dependents?=?{};
????traverse(ast,?{
??????ImportDeclaration({?node?})?{
????????//?過濾出import
????????const?newPathName?=?"./"?+?path.join(dirname,?node.source.value);
????????dependents[node.source.value]?=?newPathName;
??????}
????})
????const?{?code?}?=?transformFromAst(ast,?null,?{
??????presets:?["@babel/preset-env"]
????})
????return?{
??????entryFile,
??????dependents,
??????code
????}

結果如下：

利用遞迴或是循環(huán)逐個import 檔案進行依賴分析，這塊注意，我們是使用for 迴圈實作了分析所有依賴，之所以循環(huán)可以分析所有依賴，注意modules 的長度是變化的，當有依賴的時候.modules.push 新的依賴，modules.length 就會變化。

?for?(let?i?=?0;?i?<p><strong><span style="font-size: 18px;">第三步：寫 WebpackBootstrap 函數(shù) 產生輸出檔</span></strong></p><p><strong>編寫</strong> <strong>WebpackBootstrap</strong> <strong>函數(shù)</strong>：這里我們需要做的首先是 WebpackBootstrap 函數(shù)，編譯后我們源代碼的 import 會被解析成 require 瀏覽器既然不認識 require ，那我們就先聲明它，畢竟 require 就是一個方法，在編寫函數(shù)的時候還需要注意的是作用域隔離，防止變量污染。我們代碼中 exports 也需要我們聲明一下，保證代碼在執(zhí)行的時候 exports 已經(jīng)存在。</p><p><strong>生成輸出文件</strong>：生成文件的地址我們在配置文件已經(jīng)寫好了，再用 fs.writeFileSync 寫入到輸出文件夾即可。</p><pre class="brush:php;toolbar:false">??file(code)?{
????const?filePath?=?path.join(this.output.path,?this.output.filename)
????const?newCode?=?JSON.stringify(code);
????//?生成bundle文件內容
????const?bundle?=?`(function(modules){
??????function?require(module){
????????function?pathRequire(relativePath){
??????????return?require(modules[module].dependents[relativePath])
????????}
????????const?exports={};
????????(function(require,exports,code){
??????????eval(code)
????????})(pathRequire,exports,modules[module].code);
????????return?exports
??????}
??????require('${this.entry}')
????})(${newCode})`;
??????//??WebpackBoostrap
????//?生成文件。放入dist?目錄
????fs.writeFileSync(filePath,bundle,'utf-8')
??}

第四步：分析執(zhí)行順序

我們可以在瀏覽器的控制臺運行一下打包后的結果，如果能正常應該會打印出 hello Webpack。

總結

通過以上的分析，我們應該對 Webpack 的大概流程有基本的了解，利用 AST 去解析代碼只是本次演示的一種方式，不是 Webpack 的真實實現(xiàn)，Webpack 他自己有自己的 AST 解析方式，萬變不離其宗都是拿到模塊依賴，Webpack 生態(tài)是很完整，有興趣的童鞋可以考慮以下三個問題：

• 如果出現(xiàn)組件循環(huán)引用那又應該如何處理？
• Webpack 是如何加載 loader 的？
• 猶大大極力推薦的 vite 可以實現(xiàn)按需打包，大大提升開發(fā)時候打包速度，如果是 webapck 又是應該如何實現(xiàn)？

更多編程相關知識，請訪問：編程視頻??！

以上是深析webpack的打包流程與原理的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！