webpack loader和插件的編寫原理

webpack自定義loader和插件的api網址：https://www.webpackjs.com/api/loaders/

點擊頂部API，看左側api：

 

1. 如何編寫一個loader

實現的功能是：把js代碼中的lee改爲dellLee

 

 

 this.query 獲取options的name；

 --------

若是loader中有異步：

 

這裏注意

1:使用this.async() 告訴有異步代碼；

2:把異步返回的result放在callback中；

3:loader-utils 是一個npm i loader-utils -D 安裝的插件，便於獲取webpack.config.js 中配置loader的options；

4: 其中callback也是一個api，能夠傳入四個參數，

一個能夠同步或者異步調用的能夠返回多個結果的函數。預期的參數是：

this.callback( err: Error | null, content: string | Buffer, sourceMap?: SourceMap, meta?: any ); 

1. 第一個參數必須是 Error 或者 null
2. 第二個參數是一個 string 或者 Buffer。
3. 可選的：第三個參數必須是一個能夠被這個模塊解析的 source map。
4. 可選的：第四個選項，會被 webpack 忽略，能夠是任何東西（例如一些元數據）

 -------------

配置文件中簡化路徑：

使用resolveLoader能夠配置loader的路徑；先去 node_modules中找，再去./loaders文件夾中找

========================

 

webpack 插件的編寫：

-----

https://www.webpackjs.com/api/compiler-hooks/#emit

class CopyrightWebpackPlugin{
  apply(compiler){ //compiler是webpack配置的實例，compilation是本次打包的實例
    compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,cd)){
      console.log(1212);
      // compilation.assets 中存放的是本次打包生成的文件信息
      compilation.assets['copyright.txt'] = { //在生成的文件數組中增長新的txt文件
        source:function(){  //source 表示內容
          return 'copyright by dell lee';
        },
        size:function(){
          return 21; //表示文件大小21個字符長度
        }
      }
      cd(); //使用了異步函數 tabAsync ，必定要在這裏用cd回調函數
    }
  }
}

插件是一個類，最後打包生成兩個文件

 

------------

下面看一個同步的時刻：

class CopyrightWebpackPlugin{
  apply(compiler){ 
    compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation)){ //同步的不用傳回調函數cd
      console.log('hello');
    }
  }
}

經過在代碼中增長 debugger 進行調試，而且在控制檯查看相應的變量：