作為一個前端“攻城獅”，Webpack 再熟悉不過了，Webpack 能做的事太多了，可以將所有資源（包括JS，TS，JSX，圖像，字體和CSS 等）打包後置於依賴關係中，使你可以按照需求引用依賴來使用資源。 Webpack 很出色的完成了轉譯前端多種文件資源，分析複雜模組依賴的工作，並且我們還可以自訂loader，自由的加載我們自己的資源，那麼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 其實就是一個函數，引用的./a.js只是函數的一個參數。
2、什麼是exports？
這裡我們可以認為exports 是一個對象，MDN export 可以看下具體用法。
我們先看看下面我們打包後的程式碼結構，我們可以發現經過打包後會出現require 和exports。
並不是所有的瀏覽器都能執行require exports，必須自己去實作一下require 和exports 才能保證程式碼的正常運作。打包後的程式碼就是一個自執行函數，參數有依賴訊息，以及檔案的code，執行的函數體透過eval 執行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 裡面。
細節拆解：有人會有疑惑為什麼用AST 因為AST 天生有這個功能，它的ImportDeclaration 能幫我們快速過濾出import 語法，當然用正則匹配也是可以的，畢竟文件讀取完就是一個字符串，通過編寫牛逼的正則獲取文件依賴路徑，但是不夠elegant。
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"
模組分析：利用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
}結果如下：
利用遞歸或是循環逐個import 檔案進行依賴分析，這塊注意，我們是使用for 循環實現了分析所有依賴，之所以循環可以分析所有依賴，注意modules 的長度是變化的，當有依賴的時候.modules .push 新的依賴，modules.length 就會改變。
for (let i = 0; i < this.modules.length; i++) {
const item = this.modules[i];
const { dependents } = item;
if (dependents) {
for (let j in dependents) {
this.modules.push(this.parse(dependents[j]));
}
}
}第三步：寫WebpackBootstrap 函數+生成輸出檔
編寫WebpackBootstrap函數：這裡我們需要做的首先是WebpackBootstrap 函數，編譯後我們原始碼的import 會被解析成require 瀏覽器既然不認識require ，那我們就先聲明它，畢竟require 就是一個方法，在寫函數的時候還需要注意的是作用域隔離，防止變數污染。我們程式碼中exports 也需要我們宣告一下，確保程式碼在執行的時候exports 已經存在。
產生輸出檔：生成檔的位址我們在設定檔已經寫好了，再用fs.writeFileSync 寫入到輸出資料夾即可。
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')
} 
第四步：分析執行順序
我們可以在瀏覽器的控制台執行一下打包後的結果，如果能正常應該會列印出hello Webpack。
透過以上的分析，我們應該對Webpack 的大概流程有基本的了解，利用AST 去解析程式碼只是本次示範的一種方式，不是Webpack 的真實實現，Webpack 他自己有自己的AST 解析方式，萬變不離其宗都是拿到模組依賴，Webpack 生態是很完整，有興趣的童鞋可以考慮以下三個問題：