Loader

用於對模組原始碼的轉換，loader描述了webpack如何處理非javascript模組，並且在buld中引入這些依賴。loader可以將檔案從不同的語言（如TypeScript）轉換為JavaScript，或者將內聯影象轉換為data URL。比如說：CSS-Loader，Style-Loader等。

loader的使用很簡單：

在webpack.config.js中指定loader。module.rules可以指定多個loader，對專案中的各個loader有個全域性概覽。

loader是執行在NodeJS中，可以用options物件進行配置。plugin可以為loader帶來更多特性。loader可以進行壓縮，打包，語言翻譯等等。

loader從模板路徑解析，npm install node_modules。也可以自定義loader，命名XXX-loader。

語言類的處理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何開發技術棧都可以使用webpack。

Plugin

目的在於解決loader無法實現的其他事，從打包優化和壓縮，到重新定義環境變數，功能強大到可以用來處理各種各樣的任務。webpack提供了很多開箱即用的外掛：CommonChunkPlugin主要用於提取第三方庫和公共模組，避免首屏載入的bundle檔案，或者按需載入的bundle檔案體積過大，導致載入時間過長，是一把優化的利器。而在多頁面應用中，更是能夠為每個頁面間的應用程式共享程式碼建立bundle。

webpack功能強大，難點在於它的配置檔案，webpack4預設不需要配置檔案，可以通過mode選項為webpack指定了一些預設的配置，mode分為：development/production，預設是production。

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

【Mode】可以在config檔案裡面配置，也可以在CLI引數中配置：webpack --mode=production（一般會選擇在CLI，也就是npm scripts裡面進行配置）。

在webpack4以下版本，webpack3.XX，通過plugins進行環境變數的配置。

【resolve】模組，resolver是個庫，幫助webpack找到bundle需要引入的模組程式碼，打包時，webpack使用enhanced-resolve來解析路徑。

 resolve: {
 extensions: ['.js','.vue','.json'],alias: { 'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}
 }

【Manifest】管理所有模組之間的互動。runtime將能夠查詢模組識別符號，檢索出背後對應的模組。

問題1：webpack通過使用bundle計算content hash作為檔名稱，檔案修改，新的content hash執向新的檔案，快取無效，但是檔案內容沒有修改，計算的hash還是會改變，因為，runtime和manifest的注入在每次構建都會發生變化。要想解決這個檔案可以瞭解更多的runtime和manifest。

webpack原理：從配置檔案定義的模組列表開始，處理應用程式，從入口檔案開始遞迴構建一個依賴圖，然後將所有模組打包為少量的bundle，通常只有一個，可由瀏覽器載入。

到此這篇關於Webpack的Loader和Plugin的區別的文章就介紹到這了,更多相關Webpack Loader和Plugin內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！