深析webpack的打包流程與原理

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

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

想要知道 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，必須自己去實作一下 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。

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
    }

結果如下：

利用遞迴或是循環逐個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 是如何加载 loader 的？
• 犹大大极力推荐的 vite 可以实现按需打包，大大提升开发时候打包速度，如果是 webapck 又是应该如何实现？

更多编程相关知识，请访问：编程视频！！

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