一文詳解webpack中loader與plugin的區別

2023-02-05 14:03:17

一、Loader

1.loader的作用：

webpack 只能直接處理 javascript 格式的程式碼。任何非 js 檔案都必須被預先處理轉換為 js 程式碼，才可以參與打包。loader（載入器）就是這樣一個程式碼轉換器。

2.loader的工作原理：

它由 webpack 的 loader runner 執行呼叫，接收原始資源資料作為引數（當多個載入器聯合使用時，上一個loader的結果會傳入下一個loader），最終輸出 javascript 程式碼（和可選的 source map）給 webpack 做進一步編譯。

3. Loader 執行順序

1). loader型別

pre：前置loader normal：普通loader inline：內聯loader post：後置loader

2). 執行優先順序

4類 loader 的執行優級為：pre > normal > inline > post 。相同優先順序的 loader 執行順序為：從右到左，從下到上。 3. 字首的作用

內聯 loader 可以通過新增不同字首，跳過其他型別 loader。

! 跳過 normal loader。 -! 跳過 pre 和 normal loader。 !! 跳過 pre、 normal 和 post loader。這些字首在很多場景下非常有用。

4.如何開發一個loader

loader 是一個匯出一個函數的 node 模組。

1). 最簡單的 loader

當只有一個 loader 應用於資原始檔時，它接收原始碼作為引數，輸出轉換後的 js 程式碼。

// loaders/simple-loader.js module.exports = function loader (source) { console.log('simple-loader is working'); return source; } 揭祕webpack loader - 知乎

style-loader 最終需返回一個 js 指令碼：在指令碼中建立一個 style 標籤，將 css 程式碼賦給 style 標籤，再將這個 style 標籤插入 html 的 head 中。

二、Plugin

1.plugin解決其他的更多的自動化打包工作

plugin的範圍更大，作用也更強。

可以自動打包生成html檔案，並自動引入打包後的結果打包前清除原dist檔案中的內容可以將我們需要的但是並沒有引入靜態資源一同打包到dist檔案中對打包的結果進行特殊的處理壓縮打包後的內容，對打包結果可以進行更細的自定義操作

2.自定義外掛

1）在造輪子之前我們必須要知道它的原理，plugin相比loader還有一點很大的不同，loader只工作於模組的載入環節，而plugin即可可以作用於打包過程的每一個環節，有點像vue中的生命週期，我們可以在一個合適的週期進行相應的操作。webpack的外掛機制就是我們常說的勾點機制，整個打包過程可以分為多個環節，為了便於外掛的擴充套件，webpack機會在每個環節都提供了一個勾點，我們就可以利用這些勾點來造輪子。

2）webpack為我們提供了哪些hooks呢?

entry-option 初始化 option run 開始編譯 compile 真正開始的編譯，在建立 compilation 物件之前 compilation 生成好了 compilation 物件 make 從 entry 開始遞迴分析依賴，準備對每個模組進行 build after-compile 編譯 build 過程結束 emit 在將記憶體中 assets 內容寫到磁碟資料夾之前 after-emit 在將記憶體中 assets 內容寫到磁碟資料夾之後 done 完成所有的編譯過程 failed 編譯失敗的時候 …

3）webpack要求我們的外掛必須是一個函數，或者是一個包含apply的物件。一般來說我們都會定義一個型別，然後在這個型別中定義apply方法，最後再通過這個型別來建立一個範例物件去使用這個外掛。

const pluginName = 'myplugin'
module.exports =  class myplugin {
    apply(){}
}

這個apply方法接收一個叫compiler的引數物件，這個物件是webpack工作中最核心的物件，包含了此次打包構建的所有設定資訊，我們就可以通過這個物件去註冊勾點函數。

const pluginName = 'myplugin'
module.exports =  class myplugin {
    apply(compiler){
        compiler.hooks.run.tap(pluginName, () =>{
            {
                console.log('開始編譯');
            }
        })
    }
}

我們想在run階段輸出‘開始編譯’這句話，在webpack.config.js中引入並設定

const myplugin = require('./myplugin')
plugins:[
  new myplugin()
]

常見的Loader和Plugin

loader：

style-loader ：在html檔案中建立標籤，將js中的樣式插入

css-loader：將css檔案變成commonjs模組載入到js中，輸出為樣式字串

less-loader：將less轉換為css

url-loader+內建file-loader：處理圖片資源（不能處理html中的圖片）

html-loader：處理html中的圖片，負責引入img從而能被url-loader處理

{
    test: /.(jpg|png|gif)$/,
    use: {
        loader: 'url-loader',
        options:{
            limit:5*1024,
            esModule: false，
            name:[hash:10].[ext] //給圖片檔案重新命名，取雜湊值前10位加上原來的擴充套件名
        }
    },
    type:'javascript/auto' //在webpack4的基礎上加上這句話
    },
{
    test: /.(htm|html)$/,
    loader: 'html-loader',
}

file-loader：打包其他資源，如字型圖示，不需要優化壓縮

（webpack5之後，我們可以直接使用資源模組型別（asset module type）,來替代上面的這些loader）