loader與plugin的區別

loader的作用是將代碼進行轉換，比如less轉成css，一個loader就是一個函數，接收的參數是上一個loader的返回值，loader進行一系列處理后 返回新的代碼

plugin的作用是在webpack的編譯流程中完成某些操作，比如當webpack編譯啟動時，控制臺輸出一句話表示webpack啟動了，plugin是一個帶有apply方法的對象，apply方法的參數是compiler，在apply中注冊compiler對象的鉤子函數，鉤子函數在官網中有相應的描述。

loader

基本配置

module.exports = {
  mode: "development",  
  module: {
    rules: [
      {
        test: /\.css$/,
        // 先執行 css-loader 再執行 style-loader
        use: ["style-loader","css-loader"],
      }
    ],
  },
};

loaders處理流程

判斷當前文件名是否滿足module.rules.test的規則

滿足規則，則根據loaders數組從最后一個loader依次執行到最前的一個loader；不滿足規則，loaders數組為空，沒有可執行的loader

最后返回loaders處理結果

loader的寫法

css-loader：

module.exports = function (sourceCode) {
    var code = `var style = document.createElement("style");
    style.innerHTML = \`${sourceCode}\`;
    document.head.appendChild(style);
    module.exports = \`${sourceCode}\``;
    return code;
}

plugin

loader的功能定位是轉換代碼，而一些其他的操作難以使用loader完成，比如：

• 當webpack生成文件時，順便多生成一個說明描述文件
• 當webpack編譯啟動時，控制臺輸出一句話表示webpack啟動了
• 當xxxx時，xxxx

當我們需要把功能嵌入到webpack的編譯流程中的時候，要借助于plugin

基本配置

module.exports = {
    plugins:[
        new MyPlugin()
    ]
}

plugin是一個帶有apply方法的對象

var plugin = {
    apply: function(compiler){
        
    }
}

也可以使用class的寫法

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

apply

apply方法會在初始化階段，創建好Compiler對象后運行。

compiler對象是在初始化階段構建的，整個webpack打包期間只有一個compiler對象，后續完成打包工作的是compiler對象內部創建的compilation

apply方法在一次打包過程中只執行一次，該方法接收一個compiler對象

compiler對象提供了大量的鉤子函數（hooks，可以理解為事件），plugin的開發者可以注冊這些鉤子函數，參與webpack編譯和生成。

你可以在apply方法中使用下面的代碼注冊鉤子函數:

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名稱.事件類型(name, function(compilation){
            //事件處理函數
        })
    }
}

事件名稱

即要監聽的事件名，即鉤子名，所有的鉤子：https://www.webpackjs.com/api/compiler-hooks

事件類型

這一部分使用的是 Tapable API，這個小型的庫是一個專門用于鉤子函數監聽的庫。

它提供了一些事件類型：

• tap：注冊一個同步的鉤子函數，函數運行完畢則表示事件處理結束
• tapAsync：注冊一個基于回調的異步的鉤子函數，函數通過調用一個回調表示事件處理結束
• tapPromise：注冊一個基于Promise的異步的鉤子函數，函數通過返回的Promise進入已決狀態表示事件處理結束

處理函數

處理函數有一個事件參數compilation