如何編寫一個WebPack的插件原理及實踐

時間 2019-11-05

標籤如何編寫一個 webpack 插件原理實踐简体版

原文原文鏈接

閱讀目錄javascript

一：webpack插件的基本原理css

webpack構建工具你們應該不陌生了，那麼下面咱們來簡單的瞭解下什麼是webpack的插件。好比我如今寫了一個插件叫 "kongzhi-plugin" 這個插件。那麼這個插件在處理webpack編譯過程當中會處理一些特定的任務。html

好比咱們如今在webpack.config.js 中引入了一個以下插件：java

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

而後咱們須要以下使用該插件：node

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 模版文件
    }),
  ]
};

如上就是一個 HtmlWebpackPlugin 插件及在webpack中使用的方式了。如今咱們須要實現一個相似的webpack的插件。jquery

webpack打包是一種事件流的機制，它的原理是將各個插件串聯起來。那麼實現這一切的核心就是tapable，要想深刻了解 tapable的知識能夠看我以前的一篇文章.webpack

tapable它能夠暴露出掛載plugin的方法。可讓咱們能將plugin控制在webpack事件流上運行。
tapable給咱們暴露了不少鉤子類，能爲咱們的插件提供掛載的鉤子。
以下代碼所示：git

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook
} = require('tapable');

如上各個鉤子的含義及使用方式，能夠看我以前這篇文章的介紹。github

下面咱們來看個簡單的demo，咱們會定義一個 KongZhiClass 類，在內部咱們建立一個 hooks 這個對象，而後在該對象上分別建立同步鉤子kzSyncHook及異步鉤子 kzAsyncHook。而後分別執行，代碼以下：web

const { SyncHook, AsyncParallelHook } = require('tapable');

// 建立類 

class KongZhiClass {
  constructor() {
    this.hooks = {
      kzSyncHook: new SyncHook(['name', 'age']),
      kzAsyncHook: new AsyncParallelHook(['name', 'age'])
    }
  }
}

// 實例化
const myName = new KongZhiClass();

// 綁定同步鉤子
myName.hooks.kzSyncHook.tap("eventName1", (name, age) => {
  console.log(`同步事件eventName1： ${name} this year ${age} 週歲了, 但是仍是單身`);
});

// 綁定一個異步Promise鉤子
myName.hooks.kzAsyncHook.tapPromise('eventName2', (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`異步事件eventName2： ${name} this year ${age}週歲了，但是仍是單身`);
    }, 1000);
  });
});

// 執行同步鉤子
myName.hooks.kzSyncHook.call('空智', 31);

// 執行異步鉤子
myName.hooks.kzAsyncHook.promise('空智', 31).then(() => {
  console.log('異步事件執行完畢');
}, (err) => {
  console.log('異步事件執行異常:' + err);
})

執行結果以下：

如上是咱們使用的 tapable 的使用方式，如今咱們須要使用tapable的demo來和咱們的webpack的插件相關聯起來，咱們要如何作呢？

咱們能夠將上面的代碼來拆分紅兩個文件：compiler.js、main.js. （main.js 是入口文件）

假如咱們的項目結構以下：

|--- tapable項目
| |--- node_modules  
| |--- public
| | |--- js
| | | |--- main.js
| | | |--- compiler.js
| |--- package.json
| |--- webpack.config.js

compiler.js 須要作的事情以下：

1. 定義一個 Compiler 類，接收一個options對象參數，該參數是從main.js中的MyPlugin類的實列對象。該對象下有 apply函數。

2. 在該類中咱們定義了run方法，咱們在main.js 中執行該run函數就能夠自動執行對應的插件了。

代碼以下：

const { SyncHook, AsyncParallelHook } = require('tapable');

class Compiler {
  constructor(options) {
    this.hooks = {
      kzSyncHook: new SyncHook(['name', 'age']),
      kzAsyncHook: new AsyncParallelHook(['name', 'age'])
    };
    let plugins = options.plugins;
    if (plugins && plugins.length > 0) {
      plugins.forEach(plugin => plugin.apply(this));
    }
  }
  run() {
    console.log('開始執行了---------');
    this.kzSyncHook('我是空智', 31);
    this.kzAsyncHook('我是空智', 31);
  }
  kzSyncHook(name, age) {
    this.hooks.kzSyncHook.call(name, age);
  }
  kzAsyncHook(name, age) {
    this.hooks.kzAsyncHook.callAsync(name, age);
  }
}

module.exports = Compiler;

main.js 須要作的事情以下：

1. 引入 compiler.js 文件。
2. 定義一個本身的插件，好比叫 MyPlugin 類，該類下有 apply 函數。該函數有一個 compiler 參數，該參數就是咱們的 compiler.js 中的實列對象。而後咱們會使用 compiler 實列對象去調用 compiler.js 裏面的函數。所以就能夠自動執行了。

代碼以下所示：

const Compiler = require('./compiler');

class MyPlugin {
  constructor() {
    
  }
  apply(compiler) {
    compiler.hooks.kzSyncHook.tap("eventName1", (name, age) => {
      console.log(`同步事件eventName1： ${name} this year ${age} 週歲了, 但是仍是單身`);
    });
    compiler.hooks.kzAsyncHook.tapAsync('eventName2', (name, age) => {
      setTimeout(() => {
        console.log(`異步事件eventName2： ${name} this year ${age}週歲了，但是仍是單身`);
      }, 1000)
    });
  }
}

const myPlugin = new MyPlugin();

const options = {
  plugins: [myPlugin]
};

const compiler = new Compiler(options);
compiler.run();

最後執行的效果以下所示：

如上就是咱們仿照Compiler和webpack的插件原理邏輯實現的一個簡單demo。也就是說在webpack源碼裏面也是經過相似的方式來作的。

上面只是一個簡單實現的基本原理，可是在咱們的webpack當中咱們要如何實現一個插件呢？
在咱們的webpack官網中會介紹編寫一個插件要知足以下條件, 官網地址

從官網得知：編寫一個webpack插件須要由如下組成：

1. 一個javascript命名函數。
2. 在插件函數的prototype上定義一個 apply 方法。
3. 指定一個綁定到webpack自身的鉤子函數。
4. 處理webpack內部實列的特定數據。
5. 功能完成後調用webpack提供的回調函數。

一個最基礎的插件代碼像以下這個樣子：

// 一個javascript命名函數
function MyExampleWebpackPlugin() {
  
};
// 在插件函數的prototype上定義一個 apply 方法
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
  // 指定一個掛載到webpack自身的事件鉤子。
  compiler.plugin('webpacksEventHook', function(compilation, callback) {
    console.log('這是一個插件demo');

    // 功能完成後調用 webpack 提供的回調
    callback();
  })
}

// 導出plugin
module.exports = MyExampleWebpackPlugin;

在咱們使用該plugin的時候，相關調用及配置代碼以下：

const MyExampleWebpackPlugin = require('./MyExampleWebpackPlugin');
module.exports = {
  plugins: [
    new MyExampleWebpackPlugin(options)
  ]
};

webpack啓動後，在讀取配置的過程當中會先執行 new MyExampleWebpackPlugin(options) 初始化MyExampleWebpackPlugin來得到一個實列。而後咱們會把該實列當作參數傳遞給咱們的Compiler對象，而後會實列化 Compiler類(這個邏輯能夠結合看咱們上面實現了一個簡單的demo中的main.js和compiler.js的代碼結合起來理解)。在Compiler類中，咱們會獲取到options的這個參數，該參數是一個對象，該對象下有一個 plugins 這個屬性。而後遍歷該屬性，而後依次執行某項插件中的apply方法，即：myExampleWebpackPlugin.apply(compiler); 給插件傳遞compiler對象。插件實列獲取該compiler對象後，就能夠經過 compiler.plugin('事件名稱', '回調函數'); 監聽到webpack廣播出來的事件.(這個地方咱們能夠看咱們上面的main.js中的以下代碼能夠看到, 在咱們的main.js代碼中有這樣代碼：compiler.hooks.kzSyncHook.tap("eventName1", (name, age) => {}));
如上就是一個簡單的Plugin的插件原理(切記：結合上面的demo中main.js和compiller.js來理解效果會更好)。

回到頂部

二：理解 Compiler對象和 Compilation 對象

在開發Plugin時咱們最經常使用的兩個對象就是 Compiler 和 Compilation, 他們是Plugin和webpack之間的橋樑。

Compiler對象

Compiler 對象包含了Webpack環境全部的配置信息，包含options，loaders, plugins這些項，這個對象在webpack啓動時候被實例化，它是全局惟一的。咱們能夠把它理解爲webpack的實列。

基本源碼能夠看以下：

// webpack/lib/webpack.js
const Compiler = require("./Compiler")

const webpack = (options, callback) => {
  ...
  // 初始化 webpack 各配置參數
  options = new WebpackOptionsDefaulter().process(options);

  // 初始化 compiler 對象，這裏 options.context 爲 process.cwd()
  let compiler = new Compiler(options.context);

  compiler.options = options                               // 往 compiler 添加初始化參數

  new NodeEnvironmentPlugin().apply(compiler)              // 往 compiler 添加 Node 環境相關方法

  for (const plugin of options.plugins) {
    plugin.apply(compiler);
  }
  ...
}

源碼能夠點擊這裏查看. 官網能夠看這裏。

如上咱們能夠看到，Compiler對象包含了全部的webpack可配置的內容。開發插件時，咱們能夠從 compiler 對象中拿到全部和 webpack 主環境相關的內容。

compilation 對象

compilation 對象包含了當前的模塊資源、編譯生成資源、文件的變化等。當webpack在開發模式下運行時，每當檢測到一個文件發生改變的時候，那麼一次新的 Compilation將會被建立。從而生成一組新的編譯資源。

Compiler對象與 Compilation 對象的區別是：Compiler表明了是整個webpack從啓動到關閉的生命週期。Compilation 對象只表明了一次新的編譯。
Compiler對象的事件鉤子，咱們能夠看官網. 或者咱們也能夠查看它的源碼也能夠看獲得，查看源碼

咱們能夠了解常見的事件鉤子：下面是一些比較常見的事件鉤子及做用：

鉤子               做用                     參數               類型
after-plugins     設置完一組初始化插件以後    compiler          sync
after-resolvers   設置完 resolvers 以後     compiler          sync
run               在讀取記錄以前             compiler          async
compile           在建立新 compilation以前  compilationParams  sync
compilation       compilation 建立完成      compilation        sync
emit              在生成資源並輸出到目錄以前  compilation        async
after-emit        在生成資源並輸出到目錄以後  compilation        async
done              完成編譯                  stats              sync

理解webpack中的事件流

咱們能夠把webpack理解爲一條生產線，須要通過一系列處理流程後才能將源文件轉換成輸出結果。
這條生產線上的每一個處理流程的職責都是單一的，多個流程之間會存在依賴關係，只有完成當前處理後才能交給下一個流程去處理。

咱們的插件就像一個插入到生產線中的一個功能，在特定的時機對生產線上的資源會作處理。webpack它是經過 Tapable來組織這條複雜的生產線的。

webpack在運行的過程當中會廣播事件，插件只須要關心監聽它的事件，就能加入到這條生產線中。而後會執行相關的操做。
webpack的事件流機制它能保證了插件的有序性，使整個系統的擴展性好。事件流機制使用了觀察者模式來實現的。好比以下代碼：

/*
 * 廣播事件
 * myPlugin-name 爲事件名稱
 * params 爲附帶的參數
*/

compiler.apply('myPlugin-name', params);

/*
 * 監聽名稱爲 'myPlugin-name' 的事件，當 myPlugin-name 事件發生時，函數就會執行。
*/

compiler.hooks.myPlugin-name.tap('myPlugin-name', function(params) {
  
});

回到頂部

三：插件中經常使用的API

1. 讀取輸出資源、模塊及依賴

在咱們的emit鉤子事件發生時，表示的含義是：源文件的轉換和組裝已經完成了，在這裏事件鉤子裏面咱們能夠讀取到最終將輸出的資源、代碼塊、模塊及對應的依賴文件。而且咱們還能夠輸出資源文件的內容。好比插件代碼以下：

class MyPlugin {
  apply(compiler) {
    compiler.plugin('emit', function(compilation, callback) {
      // compilation.chunks 是存放了全部的代碼塊，是一個數組，咱們須要遍歷
      compilation.chunks.forEach(function(chunk) {
        /*
         * chunk 表明一個代碼塊，代碼塊它是由多個模塊組成的。
         * 咱們能夠經過 chunk.forEachModule 能讀取組成代碼塊的每一個模塊
        */
        chunk.forEachModule(function(module) {
          // module 表明一個模塊。
          // module.fileDependencies 存放當前模塊的全部依賴的文件路徑，它是一個數組
          module.fileDependencies.forEach(function(filepath) {
            console.log(filepath);
          });
        });
        /*
         webpack 會根據chunk去生成輸出的文件資源，每一個chunk都對應一個及以上的輸出文件。
         好比在 Chunk中包含了css 模塊而且使用了 ExtractTextPlugin 時，
         那麼該Chunk 就會生成 .js 和 .css 兩個文件
        */
        chunk.files.forEach(function(filename) {
          // compilation.assets 是存放當前全部即將輸出的資源。
          // 調用一個輸出資源的 source() 方法能獲取到輸出資源的內容
          const source = compilation.assets[filename].source();
        });
      });
      /*
       該事件是異步事件，所以要調用 callback 來通知本次的 webpack事件監聽結束。
       若是咱們沒有調用callback(); 那麼webpack就會一直卡在這裏不會日後執行。
      */
      callback();
    })
  }
}

2. 監聽文件變化

webpack讀取文件的時候，它會從入口模塊去讀取，而後依次找出全部的依賴模塊。當入口模塊或依賴的模塊發生改變的時候，那麼就會觸發一次新的 Compilation。

在咱們開發插件的時候，咱們須要知道是那個文件發生改變，致使了新的Compilation, 咱們能夠添加以下代碼進行監聽。

// 當依賴的文件發生改變的時候 會觸發 watch-run 事件
class MyPlugin {
  apply(compiler) {
    compiler.plugin('watch-run', (watching, callback) => {
      // 獲取發生變換的文件列表
      const changedFiles = watching.compiler.watchFileSystem.watcher.mtimes;
      // changedFiles 格式爲鍵值對的形式，當鍵爲發生變化的文件路徑
      if (changedFiles[filePath] !== undefined) {
        // 對應的文件就發生了變化了
      }
      callback();
    });

    /*
     默認狀況下Webpack只會監聽入口文件或其依賴的模塊是否發生變化，可是在有些狀況下好比html文件發生改變的時候，那麼webpack
     就會去監聽html文件的變化。所以就不會從新觸發新的 Compilation。所以爲了監聽html文件的變化，咱們須要把html文件加入到
     依賴列表中。所以咱們須要添加以下代碼：
    */
    compiler.plugin('after-compile', (compilation, callback) => {
      /*
       以下的參數filePath是html文件路徑，咱們把HTML文件添加到文件依賴表中，而後咱們的webpack會去監聽html模塊文件，
       html模板文件發生改變的時候，會從新啓動下從新編譯一個新的 Compilation.
      */
      compilation.fileDependencies.push(filePath);
      callback();
    })
  }
}

3. 修改輸出資源

咱們在第一點說過：在咱們的emit鉤子事件發生時，表示的含義是：源文件的轉換和組裝已經完成了，在這裏事件鉤子裏面咱們能夠讀取到最終將輸出的資源、代碼塊、模塊及對應的依賴文件。所以若是咱們如今要修改輸出資源的內容的話，咱們能夠在emit事件中去作修改。那麼全部輸出的資源會存放在 compilation.assets中，compilation.assets是一個鍵值對，鍵爲須要輸出的文件名，值爲文件對應的內容。以下代碼：

class MyPlugin {
  apply(compiler) {
    compiler.plugin('emit', (compilation, callback) => {
      // 設置名稱爲 fileName 的輸出資源
      compilation.assets[fileName] = {
        // 返回文件內容
        source: () => {
          // fileContent 便可以表明文本文件的字符串，也能夠是表明二進制文件的buffer
          return fileContent;
        },
        // 返回文件大小
        size: () => {
          return Buffer.byteLength(fileContent, 'utf8');
        }
      };
      callback();
    });
    // 讀取 compilation.assets 代碼以下：
    compiler.plugin('emit', (compilation, callback) => {
      // 讀取名稱爲 fileName 的輸出資源
      const asset = compilation.assets[fileName];
      // 獲取輸出資源的內容
      asset.source();
      // 獲取輸出資源的文件大小
      asset.size();
      callback();
    });
  }
}

4. 判斷webpack使用了哪些插件

在咱們開發一個插件的時候，咱們須要根據當前配置是否使用了其餘某個插件，咱們能夠經過讀取webpack某個插件配置的狀況，好比來判斷咱們當前是否使用了 HtmlWebpackPlugin 插件。代碼以下：

/*
 判斷當前配置使用了 HtmlWebpackPlugin 插件。
 compiler參數即爲 webpack 在 apply(compiler) 中傳入的參數
*/

function hasHtmlWebpackPlugin(compiler) {
  // 獲取當前配置下全部的插件列表
  const plugins = compiler.options.plugins;
  // 去plugins中尋找有沒有 HtmlWebpackPlugin 的實列
  return plugins.find(plugin => plugin.__proto__.constructor === HtmlWebpackPlugin) !== null;
}

回到頂部

四：編寫插件實戰

假如如今咱們的項目的目錄結構以下：

|--- webpack-plugin-demo
| |--- node_modules
| |--- js
| | |--- main.js               # js 的入口文件
| |--- plugins
| | |--- logWebpackPlugin.js   # 編寫的webpack的插件，主要做用是打印日誌功能
| |--- styles
| |--- index.html
| |--- package.json
| |--- webpack.config.js

1. 實現一個打印日誌的LogWebpackPlugin插件

代碼以下：

class LogWebpackPlugin {
  constructor(doneCallback, emitCallback) {
    this.emitCallback = emitCallback
    this.doneCallback = doneCallback
  }
  apply(compiler) {
    compiler.hooks.emit.tap('LogWebpackPlugin', () => {
      // 在 emit 事件中回調 emitCallback
      this.emitCallback();
    });
    compiler.hooks.done.tap('LogWebpackPlugin', (err) => {
      // 在 done 事件中回調 doneCallback
      this.doneCallback();
    });
    compiler.hooks.compilation.tap('LogWebpackPlugin', () => {
      // compilation（'編譯器'對'編譯ing'這個事件的監聽）
      console.log("The compiler is starting a new compilation...")
    });
    compiler.hooks.compile.tap('LogWebpackPlugin', () => {
      // compile（'編譯器'對'開始編譯'這個事件的監聽）
      console.log("The compiler is starting to compile...")
    });
  }
}

// 導出插件
module.exports = LogWebpackPlugin;

下面咱們在webpack中引入該插件；以下代碼：

// 引入LogWebpackPlugin 插件
const LogWebpackPlugin = require('./public/plugins/logWebpackPlugin');

module.exports = {
  plugins: [
    new LogWebpackPlugin(() => {
      // Webpack 模塊完成轉換成功
      console.log('emit 事件發生啦，全部模塊的轉換和代碼塊對應的文件已經生成好~')
    } , () => {
      // Webpack 構建成功，而且文件輸出了後會執行到這裏，在這裏能夠作發佈文件操做
      console.log('done 事件發生啦，成功構建完成~')
    })
  ]
}

而後執行結果以下所示：

能夠看到咱們執行成功了，執行了對應的回調函數。如上代碼中的 compiler 這個我這邊就不講解了，上面已經講過了。那麼 compiler.hooks 表明的是對外暴露了多少事件鉤子，具體那個鉤子是什麼含義，咱們能夠來看下官網

如上面代碼，咱們使用兩個鉤子事件，分別是 compiler.hooks.emit 和 compiler.hooks.done, compiler.hooks.emit 鉤子事件的含義是: 在生成資源並輸出到目錄以前。這個事件就會發生。 compiler.hooks.done 的含義是：編譯完成，該事件就會發生。所以上面截圖咱們能夠看到先觸發 emit事件，所以會打印 'done 事件發生啦，成功構建完成~', 而後會觸發 done事件，所以會打印 "emit 事件發生啦，全部模塊的轉換和代碼塊對應的文件已經生成好~" 執行這個回調函數。
github代碼查看

2. 編寫去除生成 bundle.js 中多餘的註釋的插件

項目結構以下：

|--- webpack-plugin-demo
| |--- node_modules
| |--- public
| | |--- js
| | | |--- main.js                     # 入口文件             
| | |--- plugins                       # 存放全部的webpack插件
| | | |--- AsyncPlugin.js 
| | | |--- AutoExternalPlugin.js
| | | |--- DonePlugin.js
| | | |--- FileListPlugin.js
| | | |--- MyPlugin.js
| | | |--- OptimizePlugin.js
| | |--- styles                        # 存放css樣式文件
| | |--- index.html                    # index.html模板
| |--- package.json        
| |--- webpack.config.js

項目結構如上所示；上面在 public/plugins 中一共有6個插件，咱們分別來看下6個插件的代碼：

1. public/plugins/AsyncPlugin.js 代碼以下：

class AsyncPlugin {
  constructor() {

  }
  apply(compiler) {
    // 監聽emit事件，編譯完成後，文件內容輸出到硬盤上 觸發該事件
    compiler.hooks.emit.tapAsync('AsyncPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('文件將要被寫入到硬盤中');
        callback();
      }, 2000)
    })
  }
}

module.exports = AsyncPlugin;

如上該插件代碼沒有什麼實際做用，無非就是監聽 emit 異步事件鉤子，emit事件鉤子咱們從官網

上能夠看到具體的含義爲：'在生成資源並輸出到目錄以前',會執行該事件鉤子中函數代碼，這邊無非就是在控制檯中打印一些提示信息的，沒有什麼實際做用的。
2. public/plugins/DonePlugin.js 代碼以下：

class DonePlugin {
  constructor() {

  }
  apply(compiler) {
    compiler.hooks.done.tapAsync('DonePlugin', (name, callback) => {
      console.log('所有編譯完成');
      callback();
    })
  }
}

module.exports = DonePlugin;

如上代碼也是一個意思，當編譯完成後，就會執行 done的事件鉤子的回調函數，也是在命令中提示做用的。

3. public/plugins/OptimizePlugin.js 代碼以下：

class OptimizePlugin {
  constructor() {

  }
  apply(compiler) {
    // 監聽 compilation 事件
    compiler.hooks.compilation.tap('OptimizePlugin', (compilation) => {
      compilation.hooks.optimize.tap('OptimizePlugin', () => {
        console.log('compilation 完成，正在優化，準備輸出');
      });
    });
  }
}

module.exports = OptimizePlugin;

也是同樣監聽 compilation 事件的，每當檢測到一個文件發生改變的時候，那麼一次新的 Compilation將會被建立。從而生成一組新的編譯資源。

4. public/plugins/FileListPlugin.js 代碼以下：

class FileListPlugin {
  constructor() {

  }
  apply(compiler) {
    compiler.hooks.compilation.tap('FileListPlugin', (compilation) => {
      compiler.hooks.emit.tap('FileListPlugin', () => {
        let content = '生成的文件列表\r\n';
        content = Object.keys(compilation.assets).reduce((current, prev) => current + '- ' + prev + '\r\n', content);
        console.log(content);
        compilation.assets['README.md'] = {
          source() {
            return content;
          },
          size() {
            return content.length;
          }
        }
      })
    })
  }
}
module.exports = FileListPlugin;

生成文件列表的時候，就會觸發該文件的代碼。

5. public/plugins/AutoExternalPlugin.js 代碼以下：

const ExternalModules = require('webpack/lib/ExternalModule');

class AutoExternalPlugin {
  constructor(options) {
    this.options = options;
    this.externalModules = {};
  }
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap('AutoExternalPlugin', (normalModuleFactory) => {
      // parser 將代碼轉換爲語法書 判斷有無 import
      normalModuleFactory.hooks.parser.for('javascript/auto').tap('AutoExternalPlugin', (parser, parserOptions) => {
        parser.hooks.import.tap('AutoExternalPlugin', (statement, source) => {
          if (this.options[source]) {
            this.externalModules[source] = true;
          }
        })
      })
      // factory 是建立模塊的方法
      // data 是建立模塊的參數
      normalModuleFactory.hooks.factory.tap('AutoExternalPlugin', factory => (data, callback) => {
        const dependencies = data.dependencies;
        const value = dependencies[0].request; // jquery
        if (this.externalModules[value]) {
          const varName = this.options[value].varName;
          callback(null, new ExternalModules(varName, 'window'));
        } else {
          factory(data, callback);
        }
      })
    });
    compiler.hooks.compilation.tap('InlinePlugin', (compilation) => {
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('AutoExternalPlugin', (htmlPluginData, callback) => {
        Object.keys(this.options).forEach(key => {
          this.externalModules[key] = this.options[key];
          htmlPluginData.body.unshift(this.processTags(compilation, htmlPluginData, this.options[key]))
        });
        callback(null, htmlPluginData); 
      });
    });
  }
  processTags(compilation, htmlPluginData, value) {
    var tag;
    return tag = {
      tagName: 'script',
      closeTag: true,
      attributes: {
        type: 'text/javascript',
        src: value.url
      }
    }
  }
}

module.exports = AutoExternalPlugin;

如上該插件的代碼的做用是能夠解決外部的js引用，好比我在webpack中以下使用該插件：

const AutoExternalPlugin = require('./public/plugins/AutoExternalPlugin');
module.exports = {
  plugins:[
    new AutoExternalPlugin({
      jquery:{
        varName:'jQuery',
        url: 'https://cdn.bootcss.com/jquery/3.1.0/jquery.js'
      }
    })
  ]
}

這樣我就能夠在頁面中使用jquery插件了；以下代碼所示：

import $ from 'jquery';
console.log($);

而後在咱們的頁面中引入的是該 jquery庫文件，它會把該庫文件自動生成到 index.html 上去，以下index.html 代碼變成以下了：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="manifest" href="/public/manifest.json" />
<link href="main.css" rel="stylesheet"></head>
<body>
  <div id="app">222226666</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script><script type="text/javascript" src="bundle.js"></script></body>
</html>

咱們能夠來簡單的分析下 AutoExternalPlugin.js 的代碼：

在apply方法內部會生成一個 compiler 實列，而後咱們監聽 normalModuleFactory 事件，該事件的做用咱們能夠看下官網就知道了。

compiler.hooks.normalModuleFactory.tap('AutoExternalPlugin', (normalModuleFactory) => {
  // parser 將代碼轉換爲語法書 判斷有無 import
  normalModuleFactory.hooks.parser.for('javascript/auto').tap('AutoExternalPlugin', (parser, parserOptions) => {
    parser.hooks.import.tap('AutoExternalPlugin', (statement, source) => {
      if (this.options[source]) {
        this.externalModules[source] = true;
      }
    })
  })
}

如上 parser 實例，是用來解析由 webpack 處理過的每一個模塊。parser 也是擴展自 tapable 的 webpack 類，而且提供多種 tapable 鉤子，插件做者可使用它來自定義解析過程。官網解釋能夠看這裏

如上代碼，咱們調用 parser.hooks.import 鉤子函數，而後返回的 source 就是咱們的在咱們的main.js 中調用插件名。如main.js 代碼以下：

import $ from 'jquery';

所以在咱們的webpack.config.js 中會以下初始化插件

new AutoExternalPlugin({
  jquery:{
    varName:'jQuery',
    url: 'https://cdn.bootcss.com/jquery/3.1.0/jquery.js'
  }
});

所以 source 返回的值就是 'jquery'; 其餘的代碼能夠本身稍微看看就好了。這裏暫時先不講了，因爲時間問題。

6. public/plugins/MyPlugin.js 代碼以下：

class MyPlugin {
  constructor(options) {
    this.options = options;
    this.externalModules = {};
  }
  apply(compiler) {
    var reg = /("([^\\\"]*(\\.)?)*")|('([^\\\']*(\\.)?)*')|(\/{2,}.*?(\r|\n))|(\/\*(\n|.)*?\*\/)|(\/\*\*\*\*\*\*\/)/g;
    compiler.hooks.emit.tap('CodeBeautify', (compilation) => {
      Object.keys(compilation.assets).forEach((data) => {
        console.log(data);
        let content = compilation.assets[data].source(); // 獲取處理的文本
        content = content.replace(reg, function (word) { // 去除註釋後的文本
          return /^\/{2,}/.test(word) || /^\/\*!/.test(word) || /^\/\*{3,}\//.test(word) ? "" : word;
        });
        compilation.assets[data] = {
          source() {
            return content;
          },
          size() {
            return content.length;
          }
        }
      });
    });
  }
}
module.exports = MyPlugin;

這個js代碼的真正的含義纔是咱們今天要講到的，這個插件最主要做用是去除註釋後的文本。

1. 第一步，咱們使用 compiler.hooks.emit 鉤子函數。在生成資源並輸出到目錄以前觸發該函數，也就是說將編譯好的代碼發射到指定的stream中就會觸發，而後咱們從回調函數返回的 compilation 對象上能夠拿到編譯好的 stream.

2. 訪問compilation對象，compilation內部會返回不少內部對象，這邊先不打印了，由於打印的話直接會卡死掉，要等很長時間纔會打印出來，大家本身能夠試試；而後咱們遍歷 assets.

Object.keys(compilation.assets).forEach((data) => {
  console.log(compilation.assets);
  console.log(8888)
  console.log(data);
});

以下圖所示：

1) assets 數組對象中的key是資源名。在如上代碼，咱們經過 Object.key()方法拿到了。以下所示：

main.css
bundle.js
index.html

2）而後咱們調用 compilation.assets[data].source(); 能夠獲取資源的內容。

3) 使用正則，去掉註釋，以下代碼：

Object.keys(compilation.assets).forEach((data) => {
  let content = compilation.assets[data].source(); // 獲取處理的文本
  content = content.replace(reg, function (word) { // 去除註釋後的文本
    return /^\/{2,}/.test(word) || /^\/\*!/.test(word) || /^\/\*{3,}\//.test(word) ? "" : word;
  });
});

4) 更新 compilation.assets[data] 對象，以下代碼：

compilation.assets[data] = {
  source() {
    return content;
  },
  size() {
    return content.length;
  }
}

而後咱們就能夠在webpack中引入該全部的插件：

const DonePlugin = require('./public/plugins/DonePlugin');
const OptimizePlugin = require('./public/plugins/OptimizePlugin');
const AsyncPlugin = require('./public/plugins/AsyncPlugin');
const FileListPlugin = require('./public/plugins/FileListPlugin');
const AutoExternalPlugin = require('./public/plugins/AutoExternalPlugin');
const MyPlugin = require('./public/plugins/MyPlugin');

調用方式以下：

module.exports = {
  plugins:[
    new DonePlugin(),
    new OptimizePlugin(),
    new AsyncPlugin(),
    new FileListPlugin(),
    new MyPlugin(),
    new AutoExternalPlugin({
      jquery:{
        varName:'jQuery',
        url: 'https://cdn.bootcss.com/jquery/3.1.0/jquery.js'
      }
    })
  ]
}