webpack原理

2022-09-23 06:57:16 字數 1783 閱讀 6906

entry:入口,webpack執行構建的第一步,將從entry開始,可抽象成輸入。

module:模組,在webpack裡一切皆模組,一個模組對應成一個檔案。webpack會從配置的entry開始遞迴找出所有依賴的模組。

chunk:**塊,一個chunk由多個模組組合而成,用於**合併與分割。

loader:模組轉換器,用於將模組的原內容按照需求轉換為新內容。

plugin:擴充套件外掛,在webpack構建流程中的特定時機注入擴充套件邏輯,來改變構建結果或做我們想要的事情。

output:輸出結果,在webpack經過一系列處理並得出最終想要的**後輸出結果。

webpack在啟動後會從entry裡配置的module開始,遞迴解析entry依賴的所有module。每找到一個module,就會根據配置的loader去找出對應的轉換規則,對module進行轉換後,再解析出當前module依賴的module。這些模組會以entry為單位進行分組,一個entry及其依賴的module被分到一個組也就是一個chunk,最後,webpack會將所有chunk轉換成檔案輸出。在整個流程中,webpack會在恰當的時機執行plugin裡定義的邏輯。

一、從功能作用的角度區分:

1、loader:

loader從字面的意思理解,是 載入 的意思。

由於webpack 本身只能打包commonjs規範的js檔案,所以,針對css,等格式的檔案沒法打包,就需要引入第三方的模組進行打包。

loader雖然是擴充套件了 webpack ,但是它只專注於轉化檔案(transform)這一個領域,完成壓縮,打包,語言翻譯。

loader是執行在nodejs中。

僅僅只是為了打包,僅僅只是為了打包,僅僅只是為了打包,重要的話說三遍!!!

如:css-loader和style-loader模組是為了打包css的

babel-loader和babel-core模組時為了把es6的**轉成es5

url-loader和file-loader是把進行打包的。

2、plugin是做什麼的?

plugin完成的是loader不能完成的功能,這是廢話,沒有說清楚。

plugin也是為了擴充套件webpack的功能,但是 plugin 是作用於webpack本身上的。而且plugin不僅只侷限在打包,資源的載入上,它的功能要更加豐富。從打包優化和壓縮,到重新定義環境變數,功能強大到可以用來處理各種各樣的任務。webpack提供了很多開箱即用的外掛:commonchunkplugin主要用於提取第三方庫和公共模組,避免首屏載入的bundle檔案,或者按需載入的bundle檔案體積過大,導致載入時間過長,是一把優化的利器。而在多頁面應用中,更是能夠為每個頁面間的應用程式共享**建立bundle。

外掛可以攜帶引數,所以在plugins屬性傳入new例項。

如:1)、針對html檔案打包和拷貝(還有很多設定)的外掛:html-webpack-plugin。

不但完成了html檔案的拷貝,打包,還給html中自動增加了引入打包後的js檔案的**(),還能指明把js檔案引入到html檔案的底部等等。

**如下:

plugins: [   

// 對html模板進行處理,生成對應的html,引入需要的資源模組

new htmlwebpackplugin()

]二、從執行時機的角度區分

1 . loader執行在打包檔案之前(loader為在模組載入時的預處理檔案)

2.  plugins在整個編譯週期都起作用。

Webpack學習 工作原理(上)

對於webpack的認識始終停留在對腳手架的使用,不得不說腳手架既方便又好用,修改起來也方便,只需要知道webpack中各個配置項的功能,於...

webpack

官網 中文網 webpack是一種前端資源構建工具,一個靜態模組打包器 在webpack看來,前端的所有資原始檔 js json css i...

webpack

首先安裝全域性的webpack,因為要使用到webpack的命令 然後初始化專案的webpack依賴。 使用3 10 0版本 檢視webpa...