面試題： Webpack 的 plugin 和 loader 有什麼區別

前端_小學生發表於2020-11-26
面試題WebPlugin

webpack 的打包原理

  1. 識別入口檔案
  2. 通過逐層識別模組依賴(Commonjs、amd或者es6的import，webpack都會對其進行分析，來獲取程式碼的依賴)
  3. webpack做的就是分析程式碼，轉換程式碼，編譯程式碼，輸出程式碼
  4. 最終形成打包後的程式碼

什麼是 loader

loader 是檔案載入器，能夠載入資原始檔，並對這些檔案進行一些處理，諸如編譯、壓縮等，最終一起打包到指定的檔案中。

  1. 處理一個檔案可以使用多個 loader，loader 的載入順序和配置順序是相反的
  2. 第一個執行的 loader 接收原始檔的內容作為引數，下一個 loader 接收前一個 loader 的返回值作為引數，最後一個 loader 會返回此模組的 javaScript 的原始碼

什麼是 plugin

在 webpack 執行的生命週期中會廣播很多的事件（ hooks中的事件監聽 ），plugin 可以監聽這些事件（在 apply 方法中監聽 hooks 的宣告週期），在合適的時機通過 webpack 提供的 Api 改變輸出結果 。

loader 和 plugin 的區別

對於 loader 來說，他是一個轉換器，把 A 檔案編譯轉換成 B 檔案，這裡只做單純的檔案轉換的工作

plugin 是一個擴充套件器，他豐富了 webpack 本身，在 webpack 的打包過程中，它並不直接操作檔案，而是訂閱 webpack 的宣告週期，執行更廣泛的操作。

參考文章：

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/308

相關文章