Webpack中 Loader 和 Plugin 的概念
1. Webpack Loader
Loader 是 Webpack 中的一種功能，允許你處理不同型別的檔案，將它們轉換成模組，使得它們能夠在構建過程中被正確處理。Loader 是一個函式，它接受輸入檔案，並返回一個轉換後的輸出檔案。你可以把 loader 想象成一種翻譯官，它的任務就是把 Webpack 不認識的東西翻譯成它能理解的語言。比如說，當你想要載入一張圖片或者一段 CSS 程式碼時，Webpack 預設只會處理 JavaScript 檔案，所以你需要一個 loader 來告訴 Webpack 如何處理這些非 JS 檔案。
Loader 的特點：
鏈式呼叫：Loader 可以串聯使用，形成一個處理管道。
非同步處理：Loader 可以同步或非同步執行。
動態載入：Webpack 可以在執行時動態地載入 loader。比如你在開發的時候不確定具體會處理什麼型別的檔案，擔心自己引入的loader不夠用，這個時候就需要動態載入
const context = require.context('./', false, /\.([^.]+)$/);
context.keys().forEach((key) => {
context(key); // 自動根據副檔名應用相應的 loader
});
2. Webpack Plugin
plugin 更像是一個全能型選手，它可以做很多 loader 做不了的事情。Plugin 可以在整個構建過程中新增、修改或者刪除任何東西。它們更像是 Webpack 構建過程中的外掛，可以做很多高階的任務。
Plugin 的特點：
更廣泛的鉤子：Plugin 提供了一系列鉤子，可以在構建過程的不同階段執行。
非同步處理：Plugin 可以非同步執行。
獨立於檔案處理：Plugin 不僅可以處理檔案，還可以處理其他方面的事情。
Loader 和 Plugin 的區別
作用範圍：
Loader 主要用於檔案的轉換，將檔案轉換成模組，使得它們能夠在構建過程中被正確處理。
Plugin 則可以執行更廣泛的自定義行為，不僅限於檔案處理，還可以在整個構建過程中插入自定義邏輯。
觸發時機：
Loader 在解析檔案時被觸發，即當 Webpack 遇到一個檔案時就會呼叫相應的 loader。
Plugin 可以在構建過程中的任意階段被觸發，透過 Webpack 提供的各種鉤子。
執行順序：
Loader 可以串聯使用，形成一個處理鏈，前一個 loader 的輸出作為後一個 loader 的輸入。
Plugin 按照在配置檔案中的定義順序執行。
不同適用場景
Loader
你可以把 loader 想象成一種翻譯官，它的任務就是把 Webpack 不認識的東西翻譯成它能理解的語言。比如說，當你想要載入一張圖片或者一段 CSS 程式碼時，Webpack 預設只會處理 JavaScript 檔案，所以你需要一個 loader 來告訴 Webpack 如何處理這些非 JS 檔案。
適合使用 loader 的情景:
當你需要處理某種特定型別的檔案，並且需要將其轉換成 Webpack 可以理解的模組時。
比如說，你需要把 CSS 檔案轉換成可以被匯入的模組，或者把圖片檔案轉換成 URL 或者 base64 編碼。
通常，loader 會在你引入檔案時自動被呼叫，你不需要特別去手動觸發它。
Plugin
而 plugin 更像是一個全能型選手，它可以做很多 loader 做不了的事情。Plugin 可以在整個構建過程中新增、修改或者刪除任何東西。它們更像是 Webpack 構建過程中的外掛，可以做很多高階的任務。
適合使用 plugin 的情景:
當你需要做一些更復雜的操作，比如壓縮程式碼、清理輸出目錄、生成額外的檔案（比如 HTML 檔案）等。
Plugin 可以在構建過程的多個階段被觸發，這意味著你可以利用它來做一些在 loader 層面難以實現的事情。通常，你會在 Webpack 的配置檔案中明確地新增 plugin，並指定它應該在哪個階段執行。
歸納一下
Loader 適合用於檔案級別的轉換，比如把 CSS 檔案轉換成模組，或者把圖片檔案處理成資料 URL。
Plugin 適合用於更復雜的構建任務，比如生成額外的檔案、最佳化資源、清理資料夾等。
簡單來說，如果你只是想處理檔案，讓 Webpack 能夠識別它們，那麼用 loader；如果你想要做更復雜的構建相關的任務，那就用 plugin。
Loader是否沒有存在的意義？
講了這麼多，我們再次回到開頭提到的面試官的問題——“loader豈不是沒有存在的意義了？”，一般這麼問的話答案都很明顯，但這不是高考選擇題，而是解答題，單純回答“不是”肯定不行。儘管 Plugin 更加強大，但 Loader 在 Webpack 中仍然非常重要。
檔案轉換:
Loader 是處理檔案的核心工具，沒有它，Webpack 就無法處理非 JavaScript 檔案。而有了loader，無論是css，照片，字型型別或者是其他例如JSON，xml以及markdown之類的檔案，都可以被轉換為js模組（注意不是純js程式碼）
鏈式呼叫:
Loader 的鏈式呼叫特性使得處理流程非常靈活，可以很容易地組合不同的處理步驟。
易於使用:
Loader 的配置相對簡單，易於理解和使用。
總結
Loader 和 Plugin 在 Webpack 中各有專長，它們共同協作以完成複雜的構建任務。Loader 專注於檔案的轉換，而 Plugin 則負責更廣泛的構建任務。兩者缺一不可，它們一起構成了 Webpack 強大的構建能力。除了上面提到的“翻譯官”的例子，你也可以把loader和plugin看做是菜刀和鍋，只有菜刀把菜切碎了，鍋才能把菜炒熟。舉了這麼多例子，希望可以幫助各位更好地理解二者的區別和作用。最後，祝各位讀者老爺0 waring（s），0 error（s）。
