這篇文章主要介紹“webpack的打包流程和原理是什么”，在日常操作中，相信很多人在webpack的打包流程和原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”webpack的打包流程和原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、白云鄂網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為白云鄂等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

1、什么是 require？

說到 require 首先想到的可能就是 import，import 是 es6 的一個語法標(biāo)準(zhǔn),

– require 是運(yùn)行時調(diào)用，因此 require 理論上可以運(yùn)用在代碼的任何地方；

– import 是編譯時調(diào)用，因此必須放在文件開頭；

在我們使用 Webpack 進(jìn)行編譯的時候會使用 babel 把 import 轉(zhuǎn)譯成 require，在 CommonJS 中，有一個全局性方法 require()，用于加載模塊, AMD、CMD 也采用的 require 方式來引用。

例如：

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

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

2、什么是 exports？

在這里我們可以認(rèn)為 exports 是一個對象，MDN export 可以看下具體用法。

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

我們先看看下面我們打包后的代碼結(jié)構(gòu)，我們可以發(fā)現(xiàn)經(jīng)過打包后會出現(xiàn) require 和 exports。

并不是所有的瀏覽器都能執(zhí)行 require exports，必須自己去實現(xiàn)一下 require 和 exports 才能保證代碼的正常運(yùn)行。打包后的代碼就是一個自執(zhí)行函數(shù)，參數(shù)有依賴信息，以及文件的 code，執(zhí)行的函數(shù)體通過 eval 執(zhí)行 code。

總體設(shè)計圖如下：

第一步：編寫我們的配置文件

配置文件中配置了我們打包的入口 entry 以及打包后的出口 output 為后面的生成文件做好準(zhǔn)備。

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

第二步：模塊分析

整體思路：可以總結(jié)來說就是利用 fs 文件讀取入口文件 通過 AST 獲取到 import 依賴的文件的路徑，如果依賴文件 依然有依賴一直遞歸下去直至依賴分析清楚，維護(hù)在一個 map 里面。

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

step1：新建 index.js，a.js，b.js 依賴關(guān)系如下

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 將文件讀取的字符串轉(zhuǎn)換成 AST 樹，@babel/traverse 進(jìn)行語法分析，利用 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
    }

結(jié)果如下：

利用遞歸或是循環(huán)逐個 import 文件進(jìn)行依賴分析，這塊注意，我們是使用 for 循環(huán)實現(xiàn)了分析所有依賴，之所以循環(huán)可以分析所有依賴，注意 modules 的長度是變化的，當(dāng)有依賴的時候 .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 函數(shù)+生成輸出文件

編寫WebpackBootstrap函數(shù)：這里我們需要做的首先是 WebpackBootstrap 函數(shù)，編譯后我們源代碼的 import 會被解析成 require 瀏覽器既然不認(rèn)識 require ，那我們就先聲明它，畢竟 require 就是一個方法，在編寫函數(shù)的時候還需要注意的是作用域隔離，防止變量污染。我們代碼中 exports 也需要我們聲明一下，保證代碼在執(zhí)行的時候 exports 已經(jīng)存在。

生成輸出文件：生成文件的地址我們在配置文件已經(jīng)寫好了，再用 fs.writeFileSync 寫入到輸出文件夾即可。

  file(code) {
    const filePath = path.join(this.output.path, this.output.filename)
    const newCode = JSON.stringify(code);
    // 生成bundle文件內(nèi)容
    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í)行順序

我們可以在瀏覽器的控制臺運(yùn)行一下打包后的結(jié)果，如果能正常應(yīng)該會打印出 hello Webpack。

到此，關(guān)于“webpack的打包流程和原理是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)站名稱：webpack的打包流程和原理是什么
網(wǎng)站地址：http://jinyejixie.com/article12/gdpggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、建站公司、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)