技術標籤：webpackwebpack

外掛即是一個class類,wb會呼叫其中的apply方法
涉及到的內容:compiler、tapable和compilation

配置:
	class X{
		constructor(options={}){
			(1)通過schema.json檔案定義引數格式並匯入
			(2)使用schema-util庫的validate方法驗證引數
			(3)this.options=options;   外掛傳入的引數
		}
		apply(compiler){
			compiler.options獲取檔案的所有屬性
				compiler.options.context:獲取當前檔案所在根目錄的絕對路徑
				
			compiler.hooks.鉤子('事件名稱',(回撥引數)=>{
				compilation在thisCompilation鉤子中初始化
				compilation的鉤子監聽模組
				compilation的方法對打包資源進行操作
			})
		}
	}
	module.exports=X;
	
	在webpack.config.js中匯入並配置在plugins中

新增檔案時,需要滿足webpack形式的檔案格式:
	方式一:
		手動新增需要重寫size和source方法
		compilation.assets['檔名.字尾名']={
			size(){return 檔案大小},
			source(return 檔案內容)
		}
	方式二:
		const { RawSource } = webpack.sources;  webpack4可能需要下載
		new RawSource(檔案資源);  檔案資源可以是buffer二進位制流
 

webpack檔案格式:

程式碼示例:
新增檔案:

const fs = require('fs');
const util = require('util');
const path = require('path');
const webpack = require('webpack');
//將檔案改寫成webpack形式檔案的方法
const { RawSource } = webpack.sources;

const readFile = util.promisify(fs.readFile);

class Plu{
  apply(compiler) {   //會被wb呼叫
  	//初始化compilation鉤子
 

    compiler.hooks.thisCompilation.tap('plu', (compilation,compilationParams) => { 
      //新增資源鉤子
      compilation.hooks.additionalAssets.tapAsync('plu2', async (callback) => {
        //新增資源方式一
        const content='hello pluginsss'
        compilation.assets['a.txt'] = { //往輸出檔案中新增內容
          size
 
() { return content.length }, //定義檔案大小
          source() { 
            return content;  //定義檔案內容
          }
        };
        
        const data = await readFile(path.resolve(__dirname, '../src/test.txt'));
        console.log(data);
        //新增資源方式二
        compilation.assets['b.txt'] = new RawSource(data);
        //新增資源方式三
        compilation.emitAsset('c.txt', new RawSource(data));
        callback();
      })
    })
  }
}

module.exports=Plu