Webpack 是如何實現打包的？以下這篇文章就來帶大家深入了解Webpack 打包原理，希望對大家有幫助！
作為一個前端“攻城獅”，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 <p><strong><span style="font-size: 18px;">第三步：寫 WebpackBootstrap 函數 產生輸出檔</span></strong></p><p><strong>编写</strong> <strong>WebpackBootstrap</strong> <strong>函数</strong>：这里我们需要做的首先是 WebpackBootstrap 函数，编译后我们源代码的 import 会被解析成 require 浏览器既然不认识 require ，那我们就先声明它，毕竟 require 就是一个方法，在编写函数的时候还需要注意的是作用域隔离，防止变量污染。我们代码中 exports 也需要我们声明一下，保证代码在执行的时候 exports 已经存在。</p><p><strong>生成输出文件</strong>：生成文件的地址我们在配置文件已经写好了，再用 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')
}第四步：分析执行顺序
我们可以在浏览器的控制台运行一下打包后的结果，如果能正常应该会打印出 hello Webpack。
通过以上的分析，我们应该对 Webpack 的大概流程有基本的了解，利用 AST 去解析代码只是本次演示的一种方式，不是 Webpack 的真实实现，Webpack 他自己有自己的 AST 解析方式，万变不离其宗都是拿到模块依赖，Webpack 生态是很完整，有兴趣的童鞋可以考虑以下三个问题：
更多编程相关知识，请访问：编程视频！！
以上是深析webpack的打包流程與原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
