一個為了讓console.log寫起來更偷懶的webpack-plugin

摘要： 作為一個敲碼5分鐘，除錯兩小時的bug大叔，每天和console.log打的交道自然不少，人到中年，越來越懶，於是想把console.log('bug: ', bug)變成log.bug來讓我的懶癌病發得更加徹底。於是硬著頭皮看了下webpack外掛的寫法，在此記錄一下webp...

作為一個敲碼5分鐘，除錯兩小時的bug大叔，每天和console.log打的交道自然不少，人到中年，越來越懶，於是想把console.log('bug: ', bug)變成log.bug來讓我的懶癌病發得更加徹底。於是硬著頭皮看了下webpack外掛的寫法，在此記錄一下webpack系統的學習筆記。

跟著webpack原始碼摸石過河

去吧！皮卡丘！！！

1. webpack初始化

// webpack.config.js

const webpack = require('webpack');
const WebpackPlugin = require('webpack-plugin');

const options = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
},
module: {
rules: []
},
plugins: [
new WebpackPlugin()
]
// ...
};

webpack(options);
複製程式碼

// webpack.js

// 引入Compiler類
const Compiler = require("./Compiler");

// webpack入口函式
const webpack = (options, callback) => {

// 建立一個Compiler例項
compiler = new Compiler(options.context);

// 例項儲存webpack的配置物件
compiler.options = options

// 依次呼叫webpack外掛的apply方法，並傳入compiler引用
for (const plugin of options.plugins) {
plugin.apply(compiler);
}

//執行例項的run方法
compiler.run(callback)

//返回例項
return compiler
}

module.exports = webpack
複製程式碼

• 最開始，無論我們在控制檯輸入webpack指令還是使用Node.js的API，都是呼叫了webpack函式（ 原始碼 ）,並傳入了webpack的配置選項，建立了一個 compiler 例項。
• compiler 是什麼？—— 明顯發現compiler儲存了完整的webpack的配置引數options。所以官方說：

compiler 物件代表了完整的 webpack 環境配置。這個物件在啟動 webpack 時被一次性建立，並配置好所有可操作的設定，包括 options，loader 和 plugin。可以使用 compiler 來訪問 webpack 的主環境。

• 所有 webpack-plugin 也在這裡通過提供一個叫 apply 的方法給webpack呼叫，以完成初始化的工作，並且接收到剛建立的 compiler 的引用。

2. compiler、compilation與tapable

// Compiler.js

const {
Tapable,
SyncHook,
SyncBailHook,
AsyncParallelHook,
AsyncSeriesHook
} = require("tapable");

const Compilation = require("./Compilation");

class Compiler extends Tapable {

hooks = [
hook1: new SyncHook(),
hook2: new AsyncSeriesHook(),
hook3: new AsyncParallelHook()
]

run () {
// ...
// 觸發鉤子回撥執行
this.hooks[hook1].call()
this.hooks[hook2].callAsync(() => {
this.hooks[hook4].call()
})

// 進入編譯流程
this.compile()
// ...
this.hooks[hook3].promise(() => {})
}

compile () {
// 建立一個Compilation例項
const compilation = new Compilation(this)
}
}
複製程式碼

• 研究下Compiler.js這個檔案，它引入了一個 tapable 類（ 原始碼 ）的庫，這個庫提供了一些 Hook 類，內部實現了類似的 事件訂閱/釋出系統 。

• 哪裡用到 Hook 類？—— 在 Compiler 類（ Compiler.js原始碼 ） 裡擁有很多有意思的hook，這些hook代表了整個編譯過程的各個關鍵事件節點，它們都是繼承於 Hook 類 ，所以都支援 監聽/訂閱 ，只要我們的外掛提前做好事件訂閱，那麼編譯流程進行到該事件點時，就會執行我們提供的 事件回撥 ，做我們想做的事情了。

• 如何進行訂閱呢？——在上文中每個webpack-plugin中都有一個apply方法。其實註冊的程式碼就藏在裡面，通過以下類似的程式碼實現。任何的webpack外掛都可以訂閱hook1，因此hook1維護了一個taps陣列，儲存著所有的callback。

  compiler.hooks.hook1.tap(name, callback) // 註冊/訂閱

  compiler.hooks.hook1.call() // 觸發/釋出

• 準備工作做好了之後，當 run() 方法開始被呼叫時，編譯就正式開始了。在該方法裡，執行 call/callAsync/promise 這些事件時（他們由webpack內部包括一些官方使用的webpack外掛進行觸發的管理，無需開發者操心），相應的hook就會把自己的taps裡的函式均執行一遍。大概的邏輯如下所示。

  

• 其中，hooks的執行是按照編譯的流程順序來的，hooks之間有彼此依賴的關係。

• compilation 例項也在這裡建立了，它代表了一次資源版本構建。每當檢測到檔案變化，就會建立一個新的 compilation，從而生成一組新的編譯資源。一個 compilation 物件表現了當前的模組資源、編譯生成資源、變化的檔案、以及被跟蹤依賴的狀態資訊。而且compilation也和compiler類似，擁有很多hooks（ Compilation.js原始碼 ），因此同樣提供了很多事件節點給予我們訂閱使用。

3. webpack外掛體系的使用套路

class MyPlugin {
apply(compiler) {
// 設定回撥來訪問 compilation 物件：
compiler.hooks.compilation.tap('myPlugin', (compilation) => {
// 現在，設定回撥來訪問 compilation 中的任務點：
compilation.hooks.optimize.tap('myPlugin', () => {
console.log('Hello compilation!');
});
});
}
}

module.exports = MyPlugin;
複製程式碼

• 訂閱 compiler 和 complation 的事件節點都在webpack-plugin中的 apply 方法裡書寫，具體的演示如上。當然你想拿到編譯過程中的什麼資源，首先得要找出能提供該資源引用的對應的compiler事件節點進行訂閱（上帝先創造了亞當，再有夏娃）。每個compiler時間節點能提供什麼引數，在hook的例項化時已經做了說明（如下），更多可檢視 原始碼

this.hooks = {
// 拿到compilation和params
compilation: new SyncHook(["compilation", "params"]),
// 拿到stats
done: new AsyncSeriesHook(["stats"]),
// 拿到compiler
beforeRun: new AsyncSeriesHook(["compiler"])
}
複製程式碼

梳理webpack流程

經過以上的初步探索，寫webpack外掛需要了解的幾個知識點應該有了大概的掌握：

1. 外掛提供 apply 方法供 webpack 呼叫進行初始化
2. 使用 tap 註冊方式鉤入 compiler 和 compilation 的編譯流程
3. 使用 webpack 提供的 api 進行資源的個性化處理。

寫外掛的套路已經知道了，現在還剩如何找出合適的鉤子，修改資源這件事。在webpack系統裡， 鉤子即流程，是編譯構建工作的生命週期 。當然，想要了解所有 tapable 例項物件的鉤子的具體作用，需要探索webpack所有的內部外掛如何使用這些鉤子，做了什麼工作來進行總結，想想就複雜，所以只能抽取重要流程做思路概括，借用淘寶的一張經典圖示。 整個編譯流程大概分成三個階段，現在重新整理一下：

1. 準備階段 ，webpack的初始化

• webpack依次呼叫開發者自定義的外掛的 apply 方法，讓外掛們做好事件註冊。
• WebpackOptionsApply 接收組合了 命令列 和 webpack.config.js 的配置引數，負責webpack內部基礎流程使用的外掛和compiler上下文環境的初始化工作。（ *Plugin 均為webpack內部使用的外掛）

  // webpack.js
  // 開發者自定義的外掛初始化
  if (options.plugins && Array.isArray(options.plugins)) {
  for (const plugin of options.plugins) {
  if (typeof plugin === "function") {
  plugin.call(compiler, compiler)
  } else {
  plugin.apply(compiler)
  }
  }
  }
  // ...
  // webpack內部使用的外掛初始化
  compiler.options = new WebpackOptionsApply().process(options, compiler)
  
  // WebpackOptionsApply.js
  class WebpackOptionsApply extends OptionsApply {
  process (options, compiler) {
  // ...
  new WebAssemblyModulesPlugin({
  mangleImports: options.optimization.mangleWasmImports
  }).apply(compiler);
  
  new EntryOptionPlugin().apply(compiler);
  compiler.hooks.entryOption.call(options.context, options.entry);
  
  new CompatibilityPlugin().apply(compiler);
  new HarmonyModulesPlugin(options.module).apply(compiler);
  new AMDPlugin(options.module, options.amd || {}).apply(compiler);
  // ...
  }
  }
  複製程式碼

• 執行 run / watch （一次打包/監聽打包模式）觸發 編譯 階段

2. 編譯階段 ，生成 module ， chunk 資源。

   run → compile 編譯 → 建立 compilation 物件。 compilation 的建立是一次編譯的起步，即將對所有模組 載入(load) 、 封存(seal) 、 優化(optimiz) 、 分塊(chunk) 、 雜湊(hash) 和 重新建立(restore) 。

   module.exports = class Compiler extends Tapable {
   
   run () {
   // 宣告編譯結束回撥
   function onCompiled () {}
   // 觸發run鉤子
   this.hooks.run.callAsync(this, err => {
   this.compile(onCompiled)
   })
   }
   
   compile(callback) {
   // ...
   // 編譯開始前，觸發beforeCompile鉤子
   this.hooks.beforeCompile.callAsync(params, err => {
   // 編譯開始，觸發compile鉤子
   this.hooks.compile.call(params);
   // 建立compilation例項
   const compilation = this.newCompilation(params);
   // 觸發make鉤子
   this.hooks.make.callAsync(compilation, err => {
   // 模組解析完畢，執行compilation的finish方法
   compilation.finish();
   // 資源封存，執行seal方法
   compilation.seal(err => {
   // 編譯結束，執行afterCompile鉤子
   this.hooks.afterCompile.callAsync(compilation, err => {
   
   // ...
   });
   });
   });
   });
   }
   }
   複製程式碼

• 載入模組 ： make 鉤子觸發 → DllEntryPlugin 內部外掛呼叫 compilation.addEntry → compilation 維護了一些資源生成工廠方法 compilation.dependencyFactories ，負責把入口檔案及其（迴圈）依賴轉換成 module （ module 的解析過程會應用匹配的 loader ）。每個 module 的解析過程提供 buildModule / succeedModule 等鉤子， 所有 module 解析完成後觸發 finishModules 鉤子。
• 封存 ： seal 方法包含了 優化/分塊/雜湊 ， 編譯停止接收新模組，開始生成chunks。此階段依賴了一些webpack內部外掛對module進行優化，為本次構建生成的chunk加入hash等。createChunkAssets()會根據chunk型別使用不同的模板進行渲染。此階段執行完畢後就代表一次編譯完成，觸發 afterCompile 鉤子
  • 優化 ： BannerPlugin

    compilation.hooks.optimizeChunkAssets.tapAsync('MyPlugin', (chunks, callback) => {
    chunks.forEach(chunk => {
    chunk.files.forEach(file => {
    compilation.assets[file] = new ConcatSource(
    '\/**Sweet Banner**\/',
    '\n',
    compilation.assets[file]
    );
    });
    });
    
    callback();
    });
    複製程式碼

  • 分塊 ：用來分割chunk的 SplitChunksPlugin 外掛監聽了 optimizeChunksAdvanced 鉤子
  • 雜湊 ： createHash

3. 檔案生成階段

• 編譯完成後，觸發 emit ，遍歷 compilation.assets 生成所有檔案。

寫一個增強console.log除錯體驗的webpack外掛 simple-log-webpack-plugin

一張效果圖先上為敬。（對照圖片）只需寫 log.a ，通過自己的webpack外掛自動補全欄位標識 a欄位： ，加入 檔案路徑 ，輕鬆支援 列印顏色 效果，相同檔案的日誌資訊 可摺疊 ，給你一個簡潔方便的除錯環境。

以下為原始碼，歡迎測試反饋。 github npm

const ColorHash = require('color-hash')
const colorHash = new ColorHash()

const Dependency = require('webpack/lib/Dependency');

class LogDependency extends Dependency {

constructor(module) {
super();
this.module = module;
}
}

LogDependency.Template = class {
apply(dep, source) {

const before = `;console.group('${source._source._name}');`
const after = `;console.groupEnd();`
const _size = source.size()

source.insert(0, before)

source.replace(_size, _size, after)

}
};


module.exports = class LogPlugin {

constructor (opts) {
this.options = {
expression: /\blog\.(\w+)\b/ig,
...opts
}
this.plugin = { name: 'LogPlugin' }

}

doLog (module) {

if (!module._source) return
let _val = module._source.source(),
_name = module.resource;

const filedColor = colorHash.hex(module._buildHash)

// 判斷是否需要加入
if (this.options.expression.test(_val)) {
module.addDependency(new LogDependency(module));
}

_val = _val.replace(
this.options.expression,
`console.log('%c$1欄位：%c%o， %c%s', 'color: ${filedColor}', 'color: red', $1, 'color: pink', '${_name}')`
)

return _val

}

apply (compiler) {

compiler.hooks.compilation.tap(this.plugin, (compilation) => {

// 註冊自定義依賴模板
compilation.dependencyTemplates.set(
LogDependency,
new LogDependency.Template()
);

// modlue解析完畢鉤子
compilation.hooks.succeedModule.tap(this.plugin, module => {
// 修改模組的程式碼
module._source._value = this.doLog(module)

})
})

}
}
複製程式碼